在表行jquery的创建和销毁之间切换 [英] Toggle between the creation and destruction of a table row jquery

问题描述

我正在研究一个使用mysql填充数据的表的下拉功能。当用户点击按钮时，它将在当前包含该按钮的下方创建一个新的表格行。所需的目标是使其成为按钮，如果再次按下该按钮将删除新创建的行，现在它将继续创建新的行。这是我到目前为止：

表（PHP）：

  while（$ sound = mysql_fetch_assoc（$ records））{
 echo< tr>; 
 echo< td width = '40'class ='player'>& nbsp;< a href ='beats /\".$ sound ['downloadlink']。''class = 'sm2_button' >播放/< / A>< / TD>中; 
 echo'< td width =250class =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>; 
回声< / tr>; 
  

创建新表格行：
$ （'click'，function（）{
$（this）.parents（'tr'）。after（'。'）。after （'< tr>< td height =100colspan =6>< img src =mp31.png/>< / td>< / tr>'）;
}）;

尝试在创建和删除表格行之间切换：
.toggle（）。

  $（。button）。 （'< tr>< td height =100colspan =6>< img src =mp31.png/>< / td>< / tr>'）;：.remove（））; 
}）; 
  

解决方案

这是我使用的简单标记：

 < table id =mytable> 
< tr class =adder> 
< td>我是加法器行< / td> 
< td width = '96'class ='buy'> 
< img class ='button'src ='99cents.png'/> 
< / td> 
< / tr> 
< / table> 
  

然后我用这个：

<$ p $ （'click'，'button'，'.button'，function（）{
alert（'点击'）;
var thisRow = $（this）.parents（'tr.adder'）;
var hasNextRow = thisRow.next（'tr.added'）。length;
if（hasNextRow）{
alert（ remove）;
thisRow.next（'tr.added'）。remove（）;
} else {
alert（added）;
$（this） （'tr.adder'）。after（'< tr class =added>< td height =100colspan =6>< img src =mp31.png/> ; howdy i new new< / td>< / tr>'）;
}
}）;

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

I am working on a drop down feature for a table that populates its data using mysql. When user clicks button it will create a new table row under the current one containing the button. The desired goal is to make it so the button will delete the newly created row if pressed again, right now it will just keep creating additional new ones. Here is what I have so far:

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>";

Create new table row:

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

Trying to toggle between the creation and removal of table row:

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

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

解决方案

I started to answer prior to your posting the table so this is the simple markup I used:

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

I then used this:

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

Test it out here: http://jsfiddle.net/MarkSchultheiss/d6peafsp/1/

这篇关于在表行jquery的创建和销毁之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！