javascript - 告诉表列的数量并将该数量作为顶部 colspan

Question

我是否可以检查现有表中的列数并将其分配给该表 colspan 的顶部？

<强> My code

document.write('<table border="1" cellspacing="1" cellpadding="5">')
document.write('<thead><tr><th colspan="2"> HEAD GRID </th></tr></thead>')

for(i = 0; i < 13; i++){
   document.write('<tr>')
   document.write('<td>row ' + i + ', column 0</td>')
   document.write('<td>row ' + i + ', column 1</td>')
   document.write('<td>row ' + i + ', column 2</td>')
   document.write('</tr>')
}

document.write('</table>')

可能吗？

Answer 1

假设您的 table 上有一个 ID，例如

<table id="mytable" border="1" cellspacing="1" cellpadding="5">
  <thead><tr><th colspan="2"> HEAD GRID </th></tr></thead>
  <tr>
    <td>row 0, column 0</td>
    <td>row 0, column 1</td>
    <td>row 0, column 2</td>
  </tr>
  <tr>
    <td>row 1, column 0</td>
    <td>row 2, column 1</td>
    <td>row 3, column 2</td>
  </tr>
  <!-- etc. -->
</table>

并假设 jQuery(因为它在您的标签中):

var maxCols = 1;

// look at each row in the table
//
$('#mytable tr').each(
  function() {
    // grab the count of columns in this row
    //
    var cols = $(this).children('td').length;

    if (cols > maxCols)
      maxCols = cols;
  }
);

// set `colspan` on our header, assuming a single `th` as in
// your example
//
$('#mytable th').attr('colspan', maxCols);

示例:http://codepen.io/paulroub/pen/boksc