javascript - 使用纯 javascript 更改第一行 tds 宽度

Question

我正在尝试用 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 上工作谢谢

Answer 1

这是它应该如何工作的一个例子

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>

尽情享受吧!