在 table 行 jquery 的创建和销毁之间切换

Question

我正在为 table 开发一个下拉功能，该功能使用 mysql 填充其数据。当用户单击按钮时，它将在包含该按钮的当前行下创建一个新的 table 行。期望的目标是使按钮在再次按下时删除新创建的行，现在它只会继续创建其他新行。这是我目前所拥有的：

Table (PHP):

while($sound=mysql_fetch_assoc($records)){
    echo "<tr>";
    echo "<td width='40' class='player'>&nbsp;&nbsp;<a href='beats/".$sound['downloadlink']."' class='sm2_button'>Play/</a></td>";
    echo '<td width="250" class="name">'.$sound['name'].'&nbsp;&nbsp;&nbsp;<span class="red date">'.$sound['date'].'</span></td>';
    echo "<td width='88' class='bpm'>".$sound['bpm']." B.P.M.</td>";
    echo "<td width='72' class='length'>".$sound['length']."</td>";
    echo "<td width='275' class='keywords'>".$sound['keywords']."</td>";
    echo "<td width='96' class='buy'><img class='button' src='99cents.png'/></td>";
    echo "</tr>";

新建 table 行：

$(".button").on('click', function(){
    $(this).parents('tr').after('<tr><td height="100" colspan="6"><img src="mp31.png"/></td></tr>');
});

尝试在 table 行的创建和删除之间切换：

 $(".button").on('click', function(){

    .toggle($(this).parents('tr').after('<tr><td height="100" colspan="6"><img src="mp31.png"/></td></tr>'); : .remove());
});

Answer 1

实际上您使用的 jQuery.toogle 是不正确的。

这是一个简单的例子，使用它给出 valid/correct CSS selector:

$('.toggle-btn').on('click', function(){
    $('tr:last').toggle();
});

See JSFiddle demo

编辑：

另一个 JSFiddle demo 做同样的事情，但第一次在 table

中添加行

Answer 2

我在您发布 table 之前开始回答，所以这是我使用的简单标记：

<table id="mytable">
    <tr class="adder">
        <td>I am the adder row</td>
        <td width='96' class='buy'>
            <img class='button' src='99cents.png' />
        </td>
    </tr>
</table>

然后我用了这个：

$('#mytable').on('click', ".button", function () {
    alert('Got the click');
    var thisRow = $(this).parents('tr.adder');
    var hasNextRow = thisRow.next('tr.added').length;
    if (hasNextRow) {
        alert("removing");
        thisRow.next('tr.added').remove();
    } else {
        alert("adding");
        $(this).parents('tr.adder').after('<tr class="added"><td height="100" colspan="6" ><img src="mp31.png"/>howdy i am new</td></tr>');
    }
});

在这里测试一下：http://jsfiddle.net/MarkSchultheiss/d6peafsp/1/

在 table 行 jquery 的创建和销毁之间切换

Toggle between the creation and destruction of a table row jquery

html

javascript

jquery

html-table