使用纯JavaScript更改第一行td的宽度

Question

使用纯JavaScript更改第一行td的宽度

3

我正在尝试使用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"];

我正在尝试创建一个函数，仅更改每个表格中第一行的td元素，因此最终结果应为：

<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';
 }
}

我担心使用两个循环会使浏览器无响应或变慢，所以这是否可以通过JavaScript或jquery更安全地完成？此外，我需要它在IE、Chrome和Firefox上正常工作。谢谢。

- Gabriel

1

我制作了一个jsfiddle来测试这个。尽管有很多表格，使得jsfiddle变得非常缓慢，但它仍然相对较快地完成了。 - Andrew Brooke

有什么方法可以加快它的速度吗？ - Gabriel

1

我的浏览器显示计时为13毫秒，这非常快（而且针对成千上万的表格）。如果将其转换为jQuery，则只会使其变慢。 - Andrew Brooke

好的，谢谢，我会采用它。 - Gabriel

2个回答

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>

享受！

- Hulke

嗨，谢谢你。我制作了一个更复杂的例子，看起来你的方法是赢家 :) 我用我的版本得到了 23 (ms) ，用jquery得到了80ms，而用你的方法则是14ms，所以我会将其作为答案接受。还有一个问题，我有不同数量的列，我做了这个修改，这样安全吗？还是我可以做得更好一些？var tr = document.querySelectorAll('tbody tr:first-child'); for (i = 0; i < tr.length; i++) { cols = tr[i].children; for(j=0; j<cols.length ;j++) { cols[j].style.width = size[j]; } } 谢谢 - Gabriel

看起来不错，只需在每个 for 循环初始化中添加 var 声明。例如：for (var i = 0...) 等（良好的实践）。 - Hulke

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Donnie D'Amato · Accepted Answer

我不确定你能够避免使用两个循环。一个用于遍历每个表格并找到第一行，第二个用于将宽度应用于每个td。这是我的jQuery版本：

function assignWidths(arr){
    $('table').each(function(){
       var firstRowTds = $(this).find('tr').eq(0).children('td');
       firstRowTds.each(function(i){
           $(this).css('width', arr[i] + 'px');
       });
    });
}