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

我正在为一个使用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());
});

while（$sound=mysql\u fetch\u assoc（$records））{
回声“；
回声“；
回音'.$sound['name'].'.$sound['date'].'；
回声“$sound['bpm]”下午二点“；
回声“$sound['length']”；
回声“$sound['KEYONS']”；
回声“；
回声“；

创建新表行：

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

$（“.button”）。在（'click'，function（）上{
$（this.parents（'tr'）。在（''）之后；
});

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

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

$（“.button”）。在（'click'，function（）上{
.toggle（$（this）.parents（'tr'）。在（''）；：.remove（）之后；
});

实际上您使用的是

jQuery.toogle

是不正确的

这是一个使用它的简单示例，给出了一个有效/正确的

CSS选择器

：

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

编辑：

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

---

另一个做了同样的事情，但是第一次在表中添加行

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

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

$（'#mytable'）。在（'click'，“.button'，函数（）{
警报（'点击'）；
var thisRow=$（this.parents（'tr.adder'）；
var hasNextRow=thisRow.next（'tr.added'）.length；
如果（hasNextRow）{
警报（“移除”）；
thisRow.next（'tr.added'）.remove（）；
}否则{
警告（“添加”）；
$（this.parents（'tr.adder'）。在（'howdy i am new'）之后；
}
});

---

在这里进行测试：

乍一看，作为一个用户，我希望新行可能包含所描述的“删除我”功能。这是一个很好的提示（我已经得到了认可的答案）：您不能只将TR添加到表中。DOM操作会将此TR从表中删除。您应该做的是在将整个表放入DOM之前重新呈现它。我认为更好的解决方法是将DIV与display:table cell等一起使用，而不是使用任何表（浏览器不应允许您将行注入渲染表，但应允许您删除该表并对其进行新渲染）你好，Leo，这并不是我想要做的。在用户单击“创建”按钮之前，页面上不应该存在，我正在尝试使它在创建后，如果再次按下按钮，它将被删除。@Jeff是的，我相信是的，这就是我添加第二个演示的原因。在该演示中添加了TR元素（请参见编辑）嘿，Leo，我在我的问题中添加了更多的信息，我正在使用MySql和一个循环填充我的表数据，必须低于$（this）。使用类ButtonUHMM创建图像的父（'tr'）？创建行的javascript部分是相同的…我相信您需要将它与将MySql数据发送到javascript端的方式集成