Question

此 Fiddle Example 会显示一个比较表，可在单击按钮时动态显示列中的信息。一旦表格填满，我想再次开始整个过程。但是，正如示例所示，按钮在第二次添加th:nth-child(2)和td:nth-child(2)信息时停滞不前，而不是像第一次那样转到下一列。

我猜这个部分需要进行一些更改if( allCells === fullCells ) {，以便将信息添加到下一列。

HTML

<div class="area">
    <button>Gah</button>
</div>


<div class="area">
    <button>Kaj</button>
</div>

<div class="area">
    <button>Fdw</button>
</div>

<div class="area">
    <button>ffdf</button>
</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>

代码：

$(function() {
    $('.area').each(function(){

       var area = $(this),
       filltable ='',
       button = $(this).find('button'),
       buttontext = button.text();    
       button.on("click",function(){

        var allCells = $('table').find('th,td').length;
        var fullCells = $('table').find('th,td').filter(function() { 
         return $(this).text() != ''; 
        }).length;
           if( allCells === fullCells ) { // If table is full
               $('table').find('th,td').not(':first-child').removeClass('addinfo'); 
               filltable();  

              } 
           else { // If table isn't full
                 filltable = function(){  
                 var i = $('th.addinfo').length !== 0 ? $('th.addinfo:last').index() : 0;
                 console.log( i );
                 i + 2 > $('th').length ||
                 $('th,td').filter(':nth-child(' + (i + 2) + ')')
                 .addClass( 'addinfo' ).html(buttontext);
                }
                filltable();
             }
      }); // end button on click function

   }); 

});

Answer 1

请参阅附带的演示链接。我创建了一个函数名称cleartable（），如果表格已满，则清除表格，并使用旧的filltable（）函数重新填充。有重复的代码需要清理。

th：nth-child（2）识别第二个孩子。 td：nth-child（2）标识第二列。

同样如果你想做第二行的事情，你可以使用tr：nth-child（2）。

我希望这有助于您了解jquery中的父子关系。

JSFIDDLE DEMO

function clearTable() {
  $('table th:nth-child(2)').html('');
  $('table th:nth-child(3)').html('');
  $('table th:nth-child(4)').html('');
  $('table td:nth-child(2)').html('');
  $('table td:nth-child(3)').html('');
  $('table td:nth-child(4)').html('');
}

Answer 2

http://jsfiddle.net/jqVxu/1/

我认为你最好只算数。算上所有td让我感到困惑。

$(function () {
    function filltable(buttontext) {
        var i = $('th.addinfo').length !== 0 ? $('th.addinfo:last').index() : 0;

        i + 2 > $('th').length || $('th,td').filter(':nth-child(' + (i + 2) + ')')
            .addClass('addinfo').html(buttontext);
    }

    $('.area').each(function () {
        var area = $(this),
            button = $(this).find('button'),
            buttontext = button.text();
        button.on("click", function () {
            var allCells = $('table').find('th').length-1;
            var fullCells = $('table th.addinfo').length;
            console.log(allCells, fullCells);
            if (allCells === fullCells) { // If table is full
                $('table .addinfo').removeClass('addinfo');
                filltable(buttontext);
            } else { // If table isn't full
                filltable(buttontext);
            }
        });
    });
});

如何继续向下一个表列添加数据

2 个答案: