在表行 jquery 的创建和销毁之间切换答案

【问题标题】：Toggle between the creation and destruction of a table row jquery在表行 jquery 的创建和销毁之间切换
【发布时间】：2015-10-25 21:42:30
【问题描述】：

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

表格 (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>";

新建表格行：

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

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

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

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

【问题讨论】：

乍一看，作为用户，我希望 NEW 行可能包含所描述的“删除我”功能。
一个很好的提示（我的答案已获得批准）：您不能只将 TR 添加到表中。 DOM 操作会将这个 TR 从 TABLE 中删除。您应该做的是在将整个表格放入 DOM 之前重新渲染整个表格。 Imo 更好的解决方案是将 DIV 与 display:table-cell 等一起使用，而不是使用任何表格（浏览器不应该允许您将行注入到渲染的表格中，但应该让您删除该表格并重新渲染它）

标签： javascript jquery html html-table

【解决方案1】：

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

<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/

【讨论】：

【解决方案2】：

其实你使用jQuery.toogle是不正确的。

这是一个简单的例子，使用它给出一个有效/正确的CSS selector：

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

See JSFiddle demo

编辑：

另一个JSFiddle demo做同样的事情，但第一次在表格中添加行

【讨论】：

你好 Leo，这不是我想要做的。在用户单击创建按钮之前不应该存在于页面上，我正在尝试这样做，以便在创建后，如果再次按下按钮，它将删除。
@Jeff 是的，我相信，这就是我添加第二个演示的原因。在其中添加了 TR 元素（参见编辑）
嘿 Leo，我在我的问题中添加了更多信息，我正在使用 MySql 和循环填充我的表数据，必须在 $(this).parents('tr' ) 带有类按钮的图像
嗯？创建行的 javascript 部分是相同的......我相信您需要将它与您将 mysql 数据发送到 JavaScript 端的方式集成起来