Question

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

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

Answer 2

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

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

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

<强> See JSFiddle demo

修改

其他 JSFiddle demo 做同样的事情，但是第一次在表格中添加了行

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

2 个答案: