Javascript 如何查找空表列，包括'th'，并向其中插入数据

更新：

如何找到一个空的表列，包括小提琴中的th，这样当您单击按钮时，它将只向该列注入数据。例如，当您单击X时，它将向第一个空列添加数据，G将向第二个空列添加数据……当表格已满时，请从第二个子列开始，因为第一列是某种标题列，并替换该列中的旧数据

只是猜测一下：

columnTh = $("table th");
columnIndex = columnTh.index() + 1; 
columnIndex.each(function(){
if ($(this).html() == '' && $('table tr td:nth-child(' + columnIndex + ')').html() == ''){
     // add data
}

但是如何检查整个表是否已满，以便按钮将再次向第一列添加数据

HTML:

JS代码

$(function (){
  $('.area').each(function(){
   var area = $(this),
       selectbox = area.find('select'),
       show = area.find('.show'),   
       dialog_open =  $(this).find(".dialog_open");


   selectbox.change(function(){
    selectbox = $(this).find('option:selected').text();
    show.html('<button class="dialog_open">'+selectbox+'</button>')
    });

   var foo = function() {
   var dialog_open_text = $(this).find(".dialog_open").text();
      $('table td').html(dialog_open_text);  // ****Need help in this part*****
   };

   show.one( "click",dialog_open, foo );

  });

});

---

以下是如何检查表是否已满：

var allCells = $('table').find('th,td').length;
var fullCells = $('table').find('th,td').filter(function() { 
    return $(this).text() != ''; 
}).length;

if( allCells === fullCells ) { // if true table is full, not full otherwise
    //do something table is full
} else {
    //table is not full
}

如果第一个选择指示要定位的列，第二个选择指示要放入列单元格中的内容，则可以在函数foo中使用以下逻辑：

var colN = $('select').first().val(),
    colCont = $('select').last().val(),
    allColumns = $('table').find('th:eq(' + (colN - 1) + '),td:eq(' + (colN - 1) + ')').length,
    fullColumns = $('table').find('th:eq(' + (colN - 1) + '),td:eq(' + (colN - 1) + ')').filter(function() { return $(this).text() != ''; }).length;

然后可以检查目标列是否已满：

if( allColumns === fullColumns ) { 
    //all cells in target column full
} else {
    //not all cells in target column are full
}

可以通过以下方式清空除第一列以外的所有内容：

$('table').find('th,td').not(':first-child').empty();

下面是如何填写一列：

$('td').filter(':nth-child(' + colN + ')').html(dialog_open_text);

---

“空”是指该列中的每个单元格都没有数据吗？@user3558931，是的，我正试图找到包括th td在内的整个列为空，以便一次只添加一列数据。您是想按列填充表格还是像演示中那样填充整个表格。如何确定要填充的列号？@user3558931我希望按钮从最左边的空列开始填充表列，它不必根据列号填充数据。这让我有了一些想法。非常感谢。我在想，如果表已满，请使用.empty清空表中除第一个子列以外的所有列，因为它是标题列年龄、描述，如果您知道我在说什么，那么请从最左边的空列开始再次添加数据。现在您让我感到困惑。第一列不是年龄，描述。。。等等，这实际上是第一排。你的意思是一直谈论行还是这是一个新的要求？如果是这样的话，因为标题在th元素中，那么您只需要清空td元素。很抱歉造成混淆。我用萤火虫来确保选择器正确。我说的是在桌子满的时候清空所有的东西，除了tr td:first child和th:first child。我希望我知道你的目标是什么。我会提供更好的帮助。看，太好了！如果您还有任何问题，请随时告诉我们。

$('td').filter(':nth-child(' + colN + ')').html(dialog_open_text);