Question

更新了Fiddle Example：

如何在小提琴中找到一个空表列，包括th，这样当您点击一个按钮时，它只会将数据注入该列。例如，当您点击＆＃34; X＆＃34;它会将数据添加到第一个空列，＆＃34; G＆＃34;将数据添加到第二个空....当表已满时，从第二个子列开始（因为第一列是某种标题列）并替换该列中的旧数据。

只是一个猜测：

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

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

HTML：

<div class="area">
    <select>
        <option>Choose</option>
        <option>R</option>
        <option>T</option>
    </select>
    <div class="show">
    </div>
</div>

<div class="area">
    <select>
        <option>Choose</option>
        <option>X</option>
        <option>G</option>
    </select>
    <div class="show">
    </div>
</div>

<table>
    <thead>
        <tr>
            <th>Placeholder</th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Age</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Name</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Race</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Nationality</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Education</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>Language</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

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

  });

});

Answer 1

以下是检查表格是否已满的方法：

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

如何查找空表列，包括`th`并将数据注入其中

1 个答案: