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

我不确定你是否能够摆脱使用两个循环。一个遍历每个表并找到第一行，第二行将宽度应用于每个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');
       });
    });
}

Answer 2

这是一个如何运作的例子

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更改第一行tds宽度

2 个答案:

这是一个如何运作的例子