在表的底部添加一行，插入列标题作为其内容 - jQuery

Question

我有一个jquery mobiile应用程序，其中包含数百个表。我希望能够在每个表的末尾添加一个新行，其中包含一个单元格，其中包含一个按钮，其中的“data-”属性直接来自该表的表头。

我设法为每个添加一行和一个“测试”值，但我完全不知道如何让列标题显示在底部单元格中。

<table>
    <tbody>
        <tr>
            <th>0</th>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
        <tr>
            <td>michael</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>jeff</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>david</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>juan</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
</html>

和脚本......

$('table').on('click', 'td', function() {
    var $this = $(this),
        name = $this.siblings(':first-child').text(),
        pos = $this.index() + 1,
        num = $this.parent().siblings().first().children(':nth-child('+pos+')').text();        
    alert(num + ' & ' + name);
});

// appends a row to the bottom of the tables for Add to Cart Button 
$('table > tbody:last-child').append('<tr class="cartRow"></tr>');

// Selects each of the th cells
$('table > tbody > tr ').find('th').each(function() {
    // appends a cell to the row  
    $('table > tbody > tr:last-child').append('<td class="cartButton">'. value . '</td>');
});

// adds the button content to the table cell
$('.cartButton').append("test");

Answer 1

对于迭代th并附加其内容使用，$(this).text()，

// Selects each of the th cells
$('table > tbody > tr > th').each(function() {
    // appends a cell to the row  
    $('table > tbody > tr:last-child')
      .append('<td class="cartButton">'+$(this).text()+'</td>');
});

另一个变化是删除:last-child，它不会有任何区别。无论如何追加为最后一个孩子添加。

$('table > tbody:last-child').append(..

＆＃13;

＆＃13;

$('table').on('click', 'td', function() {
    var $this = $(this),
        name = $this.siblings(':first-child').text(),
        pos = $this.index() + 1,
        num = $this.parent().siblings().first().children(':nth-child('+pos+')').text();        
    alert(num + ' & ' + name);
});

// appends a row to the bottom of the tables for Add to Cart Button 
$('table > tbody').append('<tr class="cartRow"></tr>');

// Selects each of the th cells
$('table > tbody > tr > th').each(function() {
    // appends a cell to the row  
    $('table > tbody > tr:last-child')
      .append('<td class="cartButton">'+$(this).text()+'</td>');
});

// adds the button content to the table cell
$('.cartButton').append("test");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <th>0</th>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
        <tr>
            <td>michael</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>jeff</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>david</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>juan</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

在每个表的末尾添加一个新行：

// Selects each of the th cells
$('table').each(function() {
    var $this = $(this);
    $('tbody > tr > th', this).each(function(){
        // appends a cell to the row  
        $('tbody > tr:last-child', $this)
          .append('<td class="cartButton">'+$(this).text()+'</td>');
    });
});

＆＃13;

＆＃13;

$('table').on('click', 'td', function() {
    var $this = $(this),
        name = $this.siblings(':first-child').text(),
        pos = $this.index() + 1,
        num = $this.parent().siblings().first().children(':nth-child('+pos+')').text();        
    alert(num + ' & ' + name);
});

// appends a row to the bottom of the tables for Add to Cart Button 
$('table > tbody').append('<tr class="cartRow"></tr>');

// Selects each of the th cells
$('table').each(function() {
    var $this = $(this);
    $('tbody > tr > th', this).each(function(){
        // appends a cell to the row  
        $('tbody > tr:last-child', $this)
          .append('<td class="cartButton">'+$(this).text()+'</td>');
    });
});

// adds the button content to the table cell
$('.cartButton').append("test");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <th>0</th>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
        <tr>
            <td>michael</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>jeff</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>david</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>juan</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

克隆第一行到底？ 并根据属性添加按钮？

＆＃13;

＆＃13;

$('table').each(function(){
  $(this).find('tr:first').clone().appendTo(this)
  .find('th:not(:nth-child(1))').each(function(){
    $('<button/>').html($(this).attr('id'))// use .data(...) if need
    .appendTo($(this).html(''))
  })
})

＆＃13;

table,tr,td,th{
  border:1px solid black;
  border-collapse:collapse;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <th>0</th>         <th id="a">1</th> <th id="b">2</th> <th id="c">3</th>
        </tr>
        <tr>
            <td>michael</td>   <td></td>  <td></td>  <td></td>
        </tr>
        <tr>
            <td>jeff</td>      <td></td>  <td></td>  <td></td>
        </tr>
        <tr>
            <td>david</td>     <td></td>  <td></td>  <td></td>
        </tr>
        <tr>
            <td>juan</td>      <td></td>  <td></td>  <td></td>
        </tr>
    </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;