我正在尝试用 JavaScript 更新第一行宽度, 我有多个表
<table page="1">
<tbody>
<tr><td>aaaa</td><td>bbbbb</td></tr>
<tr><td>cccc</td><td>ddddd</td></tr>
....
</tbody>
</table>
<table page="2">
<tbody>
<tr><td>eeee</td><td>fffff</td></tr>
<tr><td>gggg</td><td>hhhhh</td></tr>
....
</tbody>
</table>
和一个数组
var cw = ["100","500"];
我正在尝试创建一个函数,它将仅更改每个表中第一行的 tds,因此最终结果应该是
<table page="1">
<tbody>
<tr><td style="width:100px;">aaaa</td><td style="width:500px;">bbbbb</td></tr>
<tr><td>cccc</td><td>ddddd</td></tr>
....
</tbody>
</table>
<table page="2">
<tbody>
<tr><td style="width:100px;">eeee</td><td style="width:500px;">fffff</td></tr>
<tr><td>gggg</td><td>hhhhh</td></tr>
....
</tbody>
</table>
因为我才开始使用 JavaScript,所以我不知道最好的做事方式,所以我把这个 jsfiddle 从不同的例子放在一起,问题是我将在一页中有很多表格(大约 300)我想知道这是否是最好的方法:
var cw = ["100","500"];
var i,j,col;
var tables = document.getElementsByTagName("table");
for(i = 0;i<tables.length;i++) {
for ( j = 0, col; col = tables[i].rows[0].cells[j]; j++) {
col.style.width = cw[j]+'px';
}
}
我担心 2 个循环会使浏览器无响应或变慢,那么可以使用 JavaScript 或 jquery 更安全地完成此操作吗? 我还需要它在 IE、Chrome 和 Firefox 上工作 谢谢
最佳答案
这是它应该如何工作的一个例子
var size = ["100px", "500px"];
var tr = document.querySelectorAll('tbody tr:first-child');
for (i = 0; i < tr.length; i++) {
tr[i].firstElementChild.style.width = size[0];
tr[i].querySelector('td:nth-child(2)').style.width = size[1];
}
td {
background: yellow;
}
// Background for showing purpose only!
<table page="1">
<tbody>
<tr><td>aaaa</td><td>bbbbb</td></tr>
<tr><td>cccc</td><td>ddddd</td></tr>
</tbody>
</table>
<table page="2">
<tbody>
<tr><td>eeee</td><td>fffff</td></tr>
<tr><td>gggg</td><td>hhhhh</td></tr>
</tbody>
</table>
尽情享受吧!
关于javascript - 使用纯 javascript 更改第一行 tds 宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34468133/