Question

当存在包含rowspan / colspan的单元格时，如何获取表的列数？

更新：在这个问题中，我指的是经典（据我所知）使用表格，当需要使用colspan时，虽然规范并不要求（和表看起来很丑，但它会有效。）

我需要JavaScript / jQuery来获取下表的11（因为11是此表的最大列数）：

<table border="1">
    <thead>
        <tr>
            <th rowspan="3">Lorem</th>
            <th rowspan="3">ipsum</th>
            <th rowspan="3">dolor</th>
            <th colspan="4">sit</th>
            <th colspan="4">amet</th>
        </tr>
        <tr>
            <th colspan="3">consectetur</th>
            <th rowspan="2">adipisicing</th>
            <th rowspan="2">elit</th>
            <th rowspan="2">sed</th>
            <th rowspan="2">do</th>
            <th rowspan="2">eiusmod</th>
        </tr>
        <tr>
            <th>tempor</th>
            <th>incididunt</th>
            <th>ut</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

https://jsfiddle.net/toahb3a3/

我的个人解决方案是：

$(function(){
  var max = 0;
  $('tr').each(function(){
    var current = 0;
    $(this).find('th').each(function(){
      var colspan = $(this).attr('colspan');
      current += Number(colspan ? colspan : 1);
    });
    max = Math.max(current, max);
  });
  console.log(max);
});

https://jsfiddle.net/mt7qhbqd/

更新：要解决此问题，我们需要在th的第一行中colspan元素加上thead的总和。感谢Andy的代码，它非常紧凑，它让我觉得我只需要第一行。还有，感谢Quentin在不一定使用colspan的情况下指出了我的情况，所以Andy的算法不会起作用（但是Quentin的遗嘱）。还要感谢Quentin帮助我获得头衔，因为我的英语不够好。

有人可以解释为什么我的问题被否决了吗？它出了什么问题

Answer 1

要计算表中的列数，您需要找到列中列数最多的行。要做到这一点，您需要依次测试每一行，但要考虑前一行中的任何单元格。

这应该可以解决问题。

// Store the cells in each row
var rows = [];

function increment_row(index, amount) {
    if (rows[index]) {
        rows[index] += amount;
    } else {
        rows[index] = amount;
    }
}

// Count the cells in each row
$("tr").each(function (row_index, row_element) {
    var $row = $(row_element);
    $row.children().each(function (cell_index, cell_element) {
        var $cell = $(cell_element);
        var row_count = parseInt($cell.attr("rowspan"), 10) || 1;
        var col_count = parseInt($cell.attr("colspan"), 10) || 1;
        for (var i = 0; i < row_count; i++) {
             increment_row(row_index + i, col_count);        
        }
    })
});

// Find the row with the most cells
var sorted = rows.sort();
console.log(sorted[sorted.length - 1]);

Answer 2

reduce关于colspan信息。

var th = document.querySelectorAll('table thead tr:first-child th');

var cols = [].reduce.call(th, function (p, c) {
  var colspan = c.getAttribute('colspan') || 1;
  return p + +colspan;
}, 0);

DEMO

Answer 3

获得总colspan计数 - 试试这个：

$( document ).ready(function() {
  var colspan = 0;
  $( "th" ).each(function( index ) {
   if(typeof $(this).attr('colspan') != 'undefined') {
      colspan = colspan + parseInt($(this).attr('colspan'));
    }
    console.log(colspan)
  });
});

Answer 4

Hunh，最致命的方法是使用jQuery .filter或jQuery Attribute Selector

<强> If you want this should be for all who has digits only use this:

$(function() {
  // Get total no of rowspan or colspan, if attr has numbers
  var NoOfColumnHasRowSpanOrColSpan = $('th').filter(function() {
    // check if attr exist
    var _rowspan = $(this).attr('rowspan');
    var _colspan = $(this).attr('colspan');
    // check if not undefined
    if (typeof _rowspan !== typeof undefined && _rowspan !== false) {
      // return if attr has value as number
      return /[0-9]/.test(_rowspan);
    }
    // same as above
    if (typeof _colspan !== typeof undefined && _colspan !== false) {
      return /[0-9]/.test(_colspan);
    }
  }).length;
  // get no of count th who has rowspan or colspan and digit as value
  alert(NoOfColumnHasRowSpanOrColSpan);
});

<强> If you don't mind values:

$(function() {
  // Get total no of rowspan or colspan
  var NoOfColumnHasRowSpanOrColSpan = $('th[rowspan],th[colspan]').length;
  // get no of count th who has rowspan or colspan
  alert(NoOfColumnHasRowSpanOrColSpan);
});

Run DEMO:

当存在包含rowspan / colspan的单元格时，如何获取表的列数？

4 个答案: