从tr删除最后一个td

Question

我试图在鼠标上添加一个新的td。我尝试了以下方法，即删除完整的tr。我有一个简单的表格如下所示。

<table id="example" class="display" cellspacing="0" width="100%">
   <thead>
      <tr>
         <th>Name</th>
         <th>Position</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th>Name</th>
         <th>Position</th>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <td>Tiger Nixon</td>
         <td>System Architect</td>
      </tr>
      <tr>
         <td>Garrett Winters</td>
         <td>Accountant</td>
      </tr>
      <tr>
         <td>Ashton Cox</td>
         <td>Junior Technical Author</td>
      </tr>
   </tbody>
</table>

我试图在任何一个tr上添加一个新的td鼠标。下面是我的jQuery代码。

$(document).ready(function() {
    var trIndex = null;
    $('#example tr td').hover(function() {
        //on mouse over
        trIndex = $(this).parent().append("<td>Hello</td>"); //id='test'
    }, function() {
        //on mouse release
        $(trIndex).remove();//this is removing the complete tr which was previously mouse overed
    });
});

我尝试了以下方式，但没有效果。

$(trIndex).remove("td:last-child");

如何删除td？

Answer 1

因为$(this).parent().append("<td>Hello</td>");返回tr元素，因此trIndex指的是tr元素

$(document).ready(function () {
    $('#example tr').hover(function () {
        $(this).append("<td>Hello</td>"); //id='test'
    }, function () {
        $(this).find('td:last-child').remove();
    });
});

＆＃13;

＆＃13;

$(document).ready(function() {
  $('#example tr').hover(function() {
    $(this).append("<td>Hello</td>"); //id='test'
  }, function() {
    $(this).find('td:last-child').remove();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

请尝试

$('#example tr:last').remove();

Answer 3

试试这个：

$("#id th:last-child, #id td:last-child").remove();

Answer 4

在您的代码中，您将事件绑定到td而不是tr。试试这个。工作人员here

$(document).ready(function() {
  var trIndex = null;
  $('#example tr').hover(function() {
    //on mouse over
    trIndex = $(this).append("<td>Hello</td>"); //id='test'
    console.log(trIndex);
  }, function() {
    //on mouse release
    $(trIndex).find('td:last-of-type').remove(); //this is removing the complete tr which was previously mouse overed
  });
});

Answer 5

您的trIndex将指向悬停的tr。因此，您需要找到最后一个tr。请找到以下代码段。工作正常。

  

代码段：

＆＃13;

＆＃13;

$(document).ready(function() {
    var trIndex = null;
    $('#example tr td').hover(function() {
        //on mouse over
        trIndex = $(this).parent().append("<td>Hello</td>"); //id='test'
    }, function() {
        //on mouse release
        $(trIndex).find('td:last').remove();
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
   <thead>
      <tr>
         <th>Name</th>
         <th>Position</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th>Name</th>
         <th>Position</th>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <td>Tiger Nixon</td>
         <td>System Architect</td>
      </tr>
      <tr>
         <td>Garrett Winters</td>
         <td>Accountant</td>
      </tr>
      <tr>
         <td>Ashton Cox</td>
         <td>Junior Technical Author</td>
      </tr>
   </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;