Question

我尝试使用jQuery删除表中的选定行。

这是我的html标记：

<table id="resultTable">
 <tr id="first">
  <td>c1</td>      
  <td>c2</td>      
 </tr>
 <tr id="second">
  <td>c3</td>      
  <td>c4</td>      
  </tr>    
</table>
<button id="del">Clear</button>

这是我正在使用的剧本..

<script>
$(document).ready(function () {   
     var tid="";   

     $('#resultTable tr').click(function (event) {
        tid=$(this).attr('id');
          alert(tid); //trying to alert id of the clicked row   
     });

     $("#del").click(function(){
     alert("removing "+ tid);
            $(tid).remove();    
     });
 });
</script>

我宣布一个全局变量＆＃34; tid＆＃34;获得＆＃34; rowId＆＃34;并在click（）函数中使用相同的变量。但是我无法删除相应的行，请帮帮我

Answer 1

连接#以使其成为有效的ID选择器，在没有#的情况下，jQuery将查找<first>/<second>元素

＆＃13;

$(document).ready(function() {
  var tid = "";
  $('#resultTable tr').click(function(event) {
    tid = $(this).attr('id');
  });
  $("#del").click(function() {
    console.log(tid);
    if ($('#' + tid).length) {
      $('#' + tid).remove();
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="resultTable">
  <tr id="first">
    <td>c1</td>
    <td>c2</td>
  </tr>
  <tr id="second">
    <td>c3</td>
    <td>c4</td>
  </tr>
</table>
<button id="del">Clear</button>

＆＃13;

Answer 2

您错过了#元素ID

     $("#del").click(function(){
            alert("removing "+ tid);
            $('#' + tid).remove();    // you need to add #
     });

选中此jsfiddle

您可以从here

了解有关在jquery中删除的更多信息

Answer 3

IMO，你不需要任何明确的按钮。

正如您所说，您想删除所选行，
尝试使用confirm框来删除特定元素的用户输入。

如果您希望对多个选定元素使用全局删除，则可以使用每行的复选框并将其推入单个变量，一旦用户单击清除/删除按钮删除所有选定的行。这将是一个很好的做法。

$(document).ready(function() {
  var tid = "";
  $('#resultTable tr').click(function(event) {
    tid = $(this).attr('id');
    console.log(tid);
    if(confirm("Are you sure, you want to delete : "+tid))
    {
      $('#'+tid).remove();  
    }  
  });
});

＆＃13;

$(document).ready(function() {
  var tid = "";
  $('#resultTable tr').click(function(event) {
    tid = $(this).attr('id');
    console.log(tid);
    if(confirm("Are you sure, you want to delete : "+tid))
    {
      $('#'+tid).remove();  
    }  
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="resultTable">
  <tr id="first">
    <td>c1</td>
    <td>c2</td>
  </tr>
  <tr id="second">
    <td>c3</td>
    <td>c4</td>
  </tr>
</table>

＆＃13;

Answer 4

你也可以这样做

<强> HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <table id="resultTable">
   <tr id="first">
     <td>c1</td>
     <td>c2</td>
    </tr>
   <tr id="second">
     <td>c3</td>
     <td>c4</td>
   </tr>
 </table>
 <button id="del">Clear</button>

<强> JQuery的

$(document).ready(function() {
  var tid = "";
   $('#resultTable tr').on('click',function () {
    tid = '#'+ $(this).attr('id');
   });
   $("#del").click(function() { 
    if ($(tid).length > 0) {
    $(tid).remove();
     }
   });
});

检查JsFiddle

上的代码

如何使用jQuery删除html表中的选定行？

4 个答案: