Javascript 当有rowspan/colspan单元格时，如何获取表的列计数？

当有rowspan/colspan单元格时，如何获取表的列计数

更新：在这个问题中，我指的是表的经典用法（据我所知），当需要使用

colspan

时，尽管规范没有要求它（表看起来很难看，但它是有效的）

我需要JavaScript/jQuery为下表获取

11

（因为11是该表的最大列数）：

更新：要解决此问题，我们需要

th

元素加上

colspan

元素的总和，位于

thead

的第一行。感谢安迪的代码，它非常紧凑，让我觉得我只需要第一排。另外，感谢昆汀，他向我指出了当不一定使用

colspan

时的情况，因此安迪的alogrithm不会起作用（但昆汀的意愿）。还要感谢昆汀帮我写这个标题，因为我的英语还不够好

---

有人能解释为什么我的问题被否决了吗？获取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)
  });
});

---

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

这应该能奏效

// 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]);

//存储每行中的单元格
var行=[]；
函数增量_行（索引、金额）{
if（行[索引]）{
行[索引]+=金额；
}否则{
行[索引]=金额；
}
}
//计算每行中的单元格数
$（“tr”）。每个（函数（行索引，行元素）{
var$row=$（row\u元素）；
$row.children（）.each（函数（单元格索引、单元格元素）{
变量$cell=$（cell\u元素）；
var row_count=parseInt（$cell.attr（“rowspan”），10）| 1；
var col_count=parseInt（$cell.attr（“colspan”），10）| 1；
对于（变量i=0；i

减少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);

---

嗯，最致命的方法不是使用就是使用

如果您需要，这应该适用于所有有数字的人，请使用以下内容：

$(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);
});

$(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);
});

如果您不介意值：

$(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);
});

$(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);
});

---

---

在任何td节点中都没有

11

。不要太快，阅读问题。我需要得到列数，它是11。您要做的是计算表中的最大列数，对吗？@rubentd Yes。对对不起，stackoverflow非常聪明，我必须在这里添加此文本。例如，我不能只说“@rubentd Yes.”可以写成

$（“th”）。每个（函数（索引）colspan+=$（this.attr（'colspan'）| | 0；

它将是$（“th”）。每个（函数（索引）{colspan+=parseInt（$（this.attr（'colspan'））| | 0；}）；虽然这为问题中的特定数据集提供了正确答案，但这更多是靠运气而非判断。所有colspan属性的总和恰好与列数相同，这只是巧合。如果您添加额外的

Lorem

，则此代码继续声称存在11列是12.是的，我忘了确认是数字Hanks，你的解决方案可行，但看起来有点大，你觉得我的解决方案怎么样？如果我们只能扫描thead，为什么要扫描表中的每一行？@Martin-因为HTML表中的列数是由列数最多的行定义的，而不是第一行。使用rowspan/colspan，可以t没有一行的列数将达到最大值。但是，任何表的第一行总是包含有关列数的信息，通过对colspan和其中的列数求和。如果您不同意，请提供一个第一行不包含此类信息的表的示例。@Martin-“使用rowspan/colspan，可能所有行的列数都不会达到最大值。”-不，可能不是。可能每个TR元素的每列都没有TD或TH元素，但这不是一回事。@Martin-“但任何表的第一行始终包含有关列数的信息"-不正确。

12123

谢谢，您的代码更加紧凑，并且不依赖于jQuery。这假设第一行的每一列都有一个单元格。这不是HTML表的要求。Andy的代码不假设。它假设第一行必须有列或/和跨栏数。求和y您将获得整个表中的最大列数。@Martin-不。我没有说每列有一个唯一的单元格。表中的最大列数是由列数最多的行决定的，而不是第一行。@Quentin-在Andy的代码中，列数是通过计算单元格和colspan来达到的。您能提供一个工作示例吗le，Andy的代码什么时候不起作用？具有rowspan或colspan属性的单元格数与表中的列数不同。它为问题中的表提供了正确的数字，这只是巧合。@Quentin:问题是要计算具有rowspan或colspan属性的列。wro是什么ng在我的代码中？请解释一下。不，问题是表中有多少列。它只是指出，当有rowspan/colspan属性时，你不能简单地计算td/th元素的数量。@Quentin:不，我的代码不仅仅是计算所有td或th，它只适用于具有“colspan”或“rowspan”属性的td或th及其用法r问了同样的问题“当有行span/colspan的单元格时，如何获得表的列计数？”这意味着他/她想计算具有attr（列或列）的单元格