js 中关于table表格的cell，row 的属性的操作

最新推荐文章于 2023-09-16 11:00:41 发布

张伟灿

最新推荐文章于 2023-09-16 11:00:41 发布

阅读量1.2w

点赞数 1

文章标签： table url button function input

<html>
<head>
<title>添加行</title>
<script type="text/javascript">
function addRow(tb)
{

    var tb=document.getElementById(tb);
    alert(tb.rows(0).cells(0).innerText);
    var tbody = tb.childNodes[0];

    //插入行
    tbody.insertRow(0);
    //插入列

    tbody.rows[0].insertCell(0);
    tbody.rows[0].cells[0].setAttribute("align","center");
    tbody.rows[0].cells[0].setAttribute("colspan","2");
    tbody.rows[0].cells[0].appendChild(document.createTextNode("员工表"));

}
</script>
</head>
<body>
<table id="mytab" style="width:100px">
<tr> <td>编号 </td> <td>姓名 </td> </tr>
<tr> <td>1 </td> <td>小王 </td> </tr>
<tr> <td>2 </td> <td>小明 </td> </tr>
<tr> <td>3 </td> <td>小如 </td> </tr>
<tr> <td>4 </td> <td>小陈 </td> </tr>
<tr> <td>5 </td> <td>小赵 </td> </tr>
<tr> <td>6 </td> <td>小刘 </td> </tr>
<tr> <td>7 </td> <td>小王 </td> </tr>
<tr> <td>8 </td> <td>小明 </td> </tr>
<tr> <td>9 </td> <td>小如 </td> </tr>
<tr> <td>10 </td> <td>小陈 </td> </tr>
</table>
<input type="button" name="btnAddRow" οnclick="addRow('mytab')" value="添加行"/>
</body>
</html>

来自网路的东东：

第一步, 获得当前的cell,也就是 this.
第二步, this.parentNode也就是tr

遍历tr的cells,获取所有cell的innerText

我所说的都是可行的概念,虽然没有贴出源代码,还是可以琢磨出来的.

获取所有cell的值.
var permTable = document.getElementById('permMatrix');
var cells = permTable.rows(0).cells;
var cellsLength = cells.length;
for(var j=2; j < cellsLength; j++)
{
url+=cells[j].innerText+";";
}
var rowsLength=permTable.rows.length;
for(var i = 1; i < rowsLength; i++)
{
url += "&folder" + i + "=";
var cells = permTable.rows(i).cells;
var cellsLength = cells.length;
for(var j=0; j < cellsLength; j++)
{
url+=cells[j].innerText+";";
}
}