js修改td內容_js如何操作table

1. js如何操作table,tr,td

1，javascript操作table,tr,td ，代碼如下：function messageSort() { --函數名var message=document.getElementById("message").value; --添加的內容(下面有對應的html)if(name == "" ) return; --如果添加為空,返回var row = document.createElement("tr"); //創建tr的row.setAttribute("id", name); --設置row的屬性. var cell = document.createElement("td");//創建tdcell.appendChild(document.createTextNode(name));//td里注入文本row.appendChild(cell);//將TD注入TRvar deleteButton = document.createElement("input"); //這部分是添加刪除button按鈕deleteButton.setAttribute("type", "button");deleteButton.setAttribute("value", "刪除");deleteButton.onclick = function () { deleteSort(name); };cell = document.createElement("td"); cell.appendChild(deleteButton);//注入按鈕row.appendChild(cell);//將TD注入TRdocument.getElementById("sortList").appendChild(row);//將TR注入到相應地方(sortList可以看下面html)var cell5 = document.createElement("td");cell.style.background="#ffffff";//背景顏色設置row1.style.color="#ffffff"; //字體顏色設置cell5.style.display = "none" ; //ie不支持setAttribute("style", "display:none");// <td style="display:none" >dd</td> 直接寫TD是這樣..cell5.appendChild(document.createTextNode(zdid));row.appendChild(cell5);}// 刪除內容function deleteSort(id) {//這個函數為上面的刪除button調用的var rowToDelete = document.getElementById(id);var sortList = document.getElementById("sortList");sortList.removeChild(rowToDelete);}</script></head><body><table border="0" cellspacing="0" width="400" bgcolor="#f5efe7"><tr> <td height="20">增加內容:</td> <td><input id="message" type="text"></td> <td><a href="javascript:messageSort();">添加</a></td></tr></table><table border="1" width="400"><tr> <td height="20" align="center">內容:</td> <td>操作</td></tr><tbody id="sortList"></tbody></table></body>2，一般情況下定義一個效果良好的表格採用下面的屬性定義方式代碼：<table cellSpacing="0" cellPadding="0" border='1' bordercolor="black" style='border-collapse:collapse;table-layout: fixed'></table> 當某個td中沒有內容或者沒有可見元素時，td的border也會消失。解決方案就是給table添加樣式border-collapse:collapse 代碼段：.text-overflow{ display:block;/*內聯對象需加*/ width:31em; word-break:keep-all;/* 不換行 */ white-space:nowrap;/* 不換行 */ overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */ text-overflow:ellipsis;/* 當對象內文本溢出時顯示省略標記(...) ；需與overflow:hidden;一起使用。*/ } 3，但對於表格table來講是有些不同，代碼段：table{ width:30em; table-layout:fixed;/* 只有定義了表格的布局演算法為fixed，下面td的定義才能起作用。 */ } td{ width:100%; word-break:keep-all;/* 不換行 */ white-space:nowrap;/* 不換行 */ overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */ text-overflow:ellipsis;/* 當對象內文本溢出時顯示省略標記(...) ；需與overflow:hidden;一起使用。*/ }

2. js遍歷table下面所有td，並設置個別td的值高分求大神

<!DOCTYPEHTML>
<html>
<head>
<metacharset="UTF-8"/>
<title>main.html</title>
<styletype="text/css">
</style>
<scripttype="text/javascript">
	window.onload=function()
{
	vartable=document.getElementById('mytable');
	varrows=table.rows;
	for(vari=0;i<rows.length;i++)
	{
		(rows[i].className=='test')
		{
			vartxt=document.createTextNode();
			txt.nodeValue=Number(rows[i].cells[0].firstChild.nodeValue)
			+Number(rows[i].cells[1].firstChild.nodeValue);
			rows[i].cells[2].appendChild(txt);
		}
	}
}
</script>
</head>
<body>
	<tableid="mytable">
		<trclass="test">
			<tdid="d1">4</td>
			<tdid="d2">5</td>
			<tdid="d3"></td>
		</tr>
		<trclass="test">
			<tdid="d1">1115</td>
			<tdid="d2">11116</td>
			<tdid="d3"></td>
		</tr>
	</table>
</body>
</html>

3. JS如何獲得表格里<td></td>之間的內容

你給你的<td>加上一個Id , var text=document.getElementById("id").innerHTML;就可以獲取到的到TD里的內容了。

4. js中如何動態給一個表格中的某一個單元格添加一個超鏈接作為單元格內容

vartr=document.createElement('tr');
vartd=document.createElement('td');
vara=document.createElement('a');
a.href="";
a.onclick=function(){
};
td.appendChild(a);
tr.appendChild(td);

5. 怎樣用JS動態的更改jsp頁面中<td>裡面的內容。

建議你還是在後台輸出的時候就把0當成成視頻1當成音頻來輸出

6. JS或JQ怎麼設置tr下某一列td之後所有td的樣式，

在table中，默認tbody下的td會繼承thead中的th樣式，所以你先設置好th（頭部）樣式，下面的td都會繼承樣式的

7. 可以用JS腳本重新調整列寬和行高嗎

可以，代碼如下


<!DOCTYPEHTML>
<html>
<head>
<metacharset="gbk">
<title>table</title>
</head>
<body>
<tableid="tb_1"cellspacing="0"cellpadding="2"width="100%"border="1">
<tbody>
<tralign="center"bgcolor="#dcdcdc">
<tdstyle="width:100px;">用戶編號</td>
<td>試用時間</td><td>轉正時間</td><td>性別</td><td>姓名拼音</td>
<td>生日時間</td><td>民族</td><td>身高</td>
</tr>
<tr>
<td>2000001</td>
<td>1997-3-13</td><td>1997-3-13</td><td>1</td><td>WZJ</td>
<td>1965-3-13</td><td>漢</td><td>171</td>
</tr>
<tr>
<td>2000045</td>
<td>2001-2-15</td><td>2001-3-15</td><td>0</td><td>WY</td>
<td>1978-8-5</td><td>漢</td><td>162</td>
</tr>
<tr>
<td>2000046</td>
<td>2001-2-23</td><td>2001-3-23</td><td>0</td><td>LQ</td>
<td>2001-2-23</td><td>漢</td><td>171</td>
</tr>
</tbody>
</table>
<scripttype="text/javascript">
vartTD;//用來存儲當前更改寬度的TableCell,避免快速移動滑鼠的問題
vartable=document.getElementById("tb_1");
for(j=0;j<table.rows[0].cells.length;j++){
table.rows[0].cells[j].onmousedown=function(){
//記錄單元格
tTD=this;
if(event.offsetX>tTD.offsetWidth-10){
tTD.mouseDown=true;
tTD.oldX=event.x;
tTD.oldWidth=tTD.offsetWidth;
}
//記錄Table寬度
//table=tTD;while(table.tagName!=『TABLE')table=table.parentElement;
//tTD.tableWidth=table.offsetWidth;
};
table.rows[0].cells[j].onmouseup=function(){
//結束寬度調整
if(tTD==undefined)tTD=this;
tTD.mouseDown=false;
tTD.style.cursor='default';
};
table.rows[0].cells[j].onmousemove=function(){
//更改滑鼠樣式
if(event.offsetX>this.offsetWidth-10)
this.style.cursor='col-resize';
else
this.style.cursor='default';
//取出暫存的TableCell
if(tTD==undefined)tTD=this;
//調整寬度
if(tTD.mouseDown!=null&&tTD.mouseDown==true){
tTD.style.cursor='default';
if(tTD.oldWidth+(event.x-tTD.oldX)>0)
tTD.width=tTD.oldWidth+(event.x-tTD.oldX);
//調整列寬
tTD.style.width=tTD.width;
tTD.style.cursor='col-resize';
//調整該列中的每個Cell
table=tTD;while(table.tagName!='TABLE')table=table.parentElement;
for(j=0;j<table.rows.length;j++){
table.rows[j].cells[tTD.cellIndex].width=tTD.width;
}
//調整整個表
//table.width=tTD.tableWidth+(tTD.offsetWidth–tTD.oldWidth);
//table.style.width=table.width;
}
};
}
</script>
</body>
</html>

8. 只用js如何實現表格內容的動態修改

<body>

<tableid='test'>//定義一個table

<tr>

</tr>

</table>

vartb=document.getElementById('test');//獲取表格的dom節點

vartd=tb.rows[0].cells[0];//獲取0行0列的td單元格

td.innerHTML='222';//動態修改表格的內容為222

</script>

</body>

思路：

1、獲取表格的dom節點

2、通過rows和cells定位td單元格

3、通過修改innerHTML

(8)js修改td內容擴展閱讀：

JS實現動態表格的新增，修改，刪除操作

一、相關JS函數

function setParamslist() {

var tab = document.getElementById("tab");

//表格行數

var rows = tab.rows.length ;

//表格列數

var cells = tab.rows.item(0).cells.length ;

//alert("行數"+rows+"列數"+cells);

var rowData = "";

for(var i=1;i<rows;i++) {

var cellsData = new Array();

for(var j=0;j<cells-1;j++) {

cellsData.push(tab.rows[i].cells[j].innerText);

}

rowData = rowData + "|" + cellsData;

}

document.getElementById("paramslist").value = rowData;

}

//打開相關新增應用參數界面

function openAppParamsPage() {

var param = new Object();

//這個參數一定要傳。

param.win = window;

param.id = 100;

param.name = "test";

param.birthday = new Date();

var result = window.showModalDialog("addParamsItem","dialogWidth:500px;dialogHeight:600px;dialogLeft:200px;dialogTop=200px");

//var temp = document.getElementById("paramslist").value;

//document.getElementById("paramslist").value = temp + result;

addSort(result);

}

// 增加應用參數函數

function addSort(data) {

var name = data;

if(name == ""||name==undefined ) {

return;

}

console.log(data);

var params = data.split(",");

var paramName = params[0];

var paramCode = params[1];

var paramValue = params[2];

var row = document.createElement("tr");

row.setAttribute("id", paramCode);

var cell = document.createElement("td");

cell.appendChild(document.createTextNode(paramName));

row.appendChild(cell);

cell = document.createElement("td");

cell.appendChild(document.createTextNode(paramCode));

row.appendChild(cell);

cell = document.createElement("td");

cell.appendChild(document.createTextNode(paramValue));

row.appendChild(cell);

var deleteButton = document.createElement("input");

deleteButton.setAttribute("type", "button");

deleteButton.setAttribute("value", "刪除");

deleteButton.onclick = function () { deleteSort(paramCode); };

cell = document.createElement("td");

cell.appendChild(deleteButton);

row.appendChild(cell);

document.getElementById("sortList").appendChild(row);

}

// 刪除應用參數函數

function deleteSort(id) {

if (id!=null){

var rowToDelete = document.getElementById(id);

var sortList = document.getElementById("sortList");

sortList.removeChild(rowToDelete);

}

二、彈出框頁面，新增或者修改參數，並回寫相關數據。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<#include "/views/head.html"/>

</head>

<body>

<form >

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</div>

</body>

</html>

//直接關閉窗口

function closeWindow() {

window.close();

}

//獲取值，組裝後返回

function returnResult() {

if(!$('form').valid())

return;

var paramName = document.getElementById("paramName");

var paramCode = document.getElementById("paramCode");

var paramValue = document.getElementById("paramValue");

//alert("value is " + paramName.value + "," + paramCode.value + "," + paramValue.value);

var result = paramName.value + "," + paramCode.value + "," + paramValue.value;

window.returnValue = result;

window.close();

}

</script>

9. 用js改變<td>表裡的css樣式

循環所有表格，td[x1]+td[x2]+td[x3] / 3 ，取余，余為0的，那就給加CSS樣式，如果不為0，跳過，繼續td[x2]+td[3]+td[x4].........重復上一步。。回。

想的一個笨辦答法。。。。。

導航:首頁 > 編程語言 > js修改td內容

js修改td內容

(8)js修改td內容擴展閱讀：

與js修改td內容相關的資料

友情鏈接