jQuery删除以前添加的当前行_Jquery_Html_Html Table

jQuery删除以前添加的当前行

jquery html

jQuery删除以前添加的当前行,jquery,html,html-table,Jquery,Html,Html Table,如何从以前使用“删除”按钮创建的表中删除行我需要向btnDeleteOther添加一个事件以删除当前选定的行。我还需要知道如何更改创建的每个textbox的id，并使用函数中的变量填充textbox的值（但我想我必须在另一个问题中问这个问题）代码示例： <html> <head> <script type="text/javascript"> function createNewRow (text1,text2){ $(document).

如何从以前使用“删除”按钮创建的表中删除行

我需要向btnDeleteOther添加一个事件以删除当前选定的行。我还需要知道如何更改创建的每个textbox的id，并使用函数中的变量填充textbox的值（但我想我必须在另一个问题中问这个问题）

代码示例：

<html>
<head>
<script type="text/javascript">
   function createNewRow (text1,text2){
    $(document).ready(function(){
    $('#tblOtherParties > tbody').append('<tr><td>
    <input type="text" id="title1" value=""/>
           </td><td>
       <input type="text" id="title2"/>
       </td><td>
       <input type="button" id="btnDeleteOther" value="X"/>
       </td></tr>');
    });
     }
</script>
</head>
<body>
<table style="float:left" id="tblOtherParties">
  <thead>
     <tr>
     <th>Title1</th>
     <th>Title2</th>
     <th>
      <input type="button" id="btnAddOther" title="Add" value="Add" onclick="javascript:createNewRow();"/>
     </th>
    </tr>
       </thead>
      <tbody>
         <tr>
           <td>
        <input type="text" id="title1"/>
           </td>
           <td>
        <input type="text" id="title2"/>
           </td>
           <td>
        <input type="button" id="btnDeleteOther" value="X"/>
           </td>
         </tr>
      </tbody>
    </table>
</body>
</html>


函数createNewRow（text1，text2）{
$（文档）.ready（函数（）{
$（'#tblOtherParties>tbody'）。追加（'
');
});
}
标题1
标题2

由于可以有多个删除按钮，因此它们应该用类名而不是ID来标识（例如，

）

然后，您可以编写以下内容：

$('.DeleteButton').live('click', function() {
    $(this).closest('tr').remove();
});

编辑：为了防止删除最后一行，您可以写入

    $(this).closest('tr').not(':only-child').remove();

要填充文本框，可以编写以下内容：（注意，这些文本框还需要类名而不是ID）

var newRow=$（'…'）；
newRow.find（'.Title1'）.val（Title1）；
newRow.find（'.Title2'）.val（Title2）；
newRow.appendTo（$（'tblOtherParties>tbody'）；

您似乎在添加一个id为“btnDeleteOther”的项目。因此，您可能有多个具有相同id的项目。您应该为附加的项目提供唯一id[保留计数/附加时间戳/等等]

将click事件附加到按钮，然后在tr上调用remove，方法如下： $（this.closest（'tr'）.hide（）

此外，由于您将添加新项目，因此您可能希望查看.live（），以便新项目将获得单击事件。

您应该为“删除”按钮每行或每类指定一个唯一id，而不是为其指定一个固定id。HTML中的元素id必须是唯一的。我建议给它一个类，然后应用@Jonathan建议的基于类的实时选择器。正如@Mark所指出的，这同样适用于文本框。在我的示例中，我将其更改为使用名称而不是ID，但它们可能也需要唯一。根据需要调整以适应您的情况

$(function() {
   $('.deleteButton').live( 'click', function() {
       $(this).closest('tr').remove();
   });
});
function createNewRow (text1,text2){ 
    $(document).ready(function(){ 
    $('#tblOtherParties > tbody').append('<tr><td>' +
       + ' <input type="text" name="title1" value=""/>'
       + '</td><td>'
       + '<input type="text" name="title2"/>'
       + '</td><td>'
       + '<input type="button" class="deleteButton" value="X"/>'
       + '</td></tr>'); 
    }); 
}

$（函数（）{
$（'.deleteButton'）.live（'单击'，函数（））{
$（this）.closest（'tr'）.remove（）；
});
});
函数createNewRow（text1，text2）{
$（文档）.ready（函数（）{
$（'#tblOtherParties>tbody'）。追加（''+
+ ' '
+ ''
+ ''
+ ''
+ ''
+ ''); 
}); 
}

对于较旧的jQuery，您可以执行以下操作

$("#btnDeleteOther").click(function() {
    $(this).parents("tr").remove();
});

此外，要更改文本框的id，您可以在注入时执行以下操作

var content = $("<CONTENT>");
content.find("#title2").attr("id", "title" + something);
$('#tblOtherParties > tbody').append(content);

var content=$（“”）；
content.find（“#title2”）.attr（“id”，“title”+某物）；
$（'tblOtherParties>tbody'）。追加（内容）；

您遇到的问题不仅仅是删除行

这：

编辑：我最大的假设是，当您添加一行时，您可能希望将文本传递到输入，因为您有（text1，text2）在其中

要做到这一点，您需要这些资源，然后您可以使用以下方法：

var mytext1 = "default stuff for 1";
var mytext2 = "default stuff for 2";

function createNewRow (){ 
        $('#tblOtherParties > tbody').append('<tr><td> 
        <input type="text" class="title1" value=""/> 
               </td><td> 
           <input type="text" class="title2"/> 
           </td><td> 
           <input type="button" class="btnDeleteOther" value="X"/> 
           </td></tr>'); 
           $('tr:last').find('.title1').val(mytext1);
           $('tr:last').find('.title2').val(mytext2);
        };

var mytext1=“1的默认内容”；
var mytext2=“2的默认内容”；
函数createNewRow（）{
$（'#tblOtherParties>tbody'）。追加（'
'); 
$（'tr:last'）.find（'.title1'）.val（mytext1）；
$（'tr:last'）.find（'.title2'）.val（mytext2）；
};

请重新表述问题，我很难理解您需要做什么。单击“删除”按钮时是否需要删除与之关联的tr？是的，对不起，我想是我删除了。感谢您指出这一点。您的“删除”按钮应该有一个类，而不是ID。您还存在ID=“title…”的问题。这些ID也将被复制。@Cesar-只需选择“正确的”“你已经测试过的答案，这对你来说是最好的——如果其他答案也能给你带来一些荣誉的话，你也可以投票给他们。@Jonathan:谢谢！这很完美，只是最后一件事，您能告诉我当只剩下一行时如何阻止删除此函数吗？请检查

$（this）.closest（“tr”）.sibles（）.length

，查看还有多少其他表行。很抱歉，我尝试了$（this）.closest（“tr”）.sibles（）.length，但我认为我没有正确使用它，因为它没有任何作用。无论如何，谢谢。假设您将#btnDeleteOther固定为一个类，因此$（'.btnDeleteOther'）。长度应该为您提供一个带有删除按钮的行数。有关使用示例，请参见我的答案。@Cesar，您需要将其放在单击逻辑中，作为if语句的一部分。@Slaks:非常感谢您的建议，我不知道删除按钮id.：-）$（this）.closest（'tr:not（：only child'））.remove（）；将移除整个桌子-（.无论如何，谢谢。这里的id=“title1”和id=“title2”不起作用。@马克-我想我太专注于“删除”按钮了，但输入必须是唯一的（或者改用名称）还有。将更新。@Mark Schutheiss：感谢您为帮助我所做的一切努力。我认为您的建议非常好，但由于某些原因，我在使用代码时遇到了一个未终止的字符串常量错误。PS：我确实用“删除”按钮解决了这个问题，现在是一个类。谢谢：-）注意：这不是“完美的”但我试着让它尽可能靠近你的，同时解决问题。

var content = $("<CONTENT>");
content.find("#title2").attr("id", "title" + something);
$('#tblOtherParties > tbody').append(content);

   function createNewRow (text1,text2){ 
    $(document).ready(function(){ 
    $('#tblOtherParties > tbody').append('<tr><td> 
    <input type="text" id="title1" value=""/> 
           </td><td> 
       <input type="text" id="title2"/> 
       </td><td> 
       <input type="button" id="btnDeleteOther" value="X"/> 
       </td></tr>'); 
    }); 
     }

function createNewRow (text1,text2){ 
    $('#tblOtherParties > tbody').append('<tr><td> 
    <input type="text" class="title1" value=""/> 
           </td><td> 
       <input type="text" class="title2"/> 
       </td><td> 
       <input type="button" class="btnDeleteOther" value="X"/> 
       </td></tr>'); 
     };

  <input type="button" id="btnAddOther" title="Add" value="Add" onclick="javascript:createNewRow();"/>

  <input type="button" id="btnAddOther" title="Add" value="Add" >

$(document).ready(function(){
    $('.btnDeleteOther').live('click', function() {  
        if ($('.btnDeleteOther').length > 1)
        {
           $(this).closest('tr').remove();               
        }; //added this based on comments to other answer- always leaves one row in
    }); 
    $('#btnAddOther').click(function()
    { 
       createNewRow();
    });
});

var mytext1 = "default stuff for 1";
var mytext2 = "default stuff for 2";

function createNewRow (){ 
        $('#tblOtherParties > tbody').append('<tr><td> 
        <input type="text" class="title1" value=""/> 
               </td><td> 
           <input type="text" class="title2"/> 
           </td><td> 
           <input type="button" class="btnDeleteOther" value="X"/> 
           </td></tr>'); 
           $('tr:last').find('.title1').val(mytext1);
           $('tr:last').find('.title2').val(mytext2);
        };