Question

我在表中使用了一个按钮而我的按钮是单个元素但是在顶部，我正在根据某些条件更改表的行，所以当我创建的最终表时，我看到所有行中的按钮，很好，按照要求。

现在我需要在按钮单击上使用一个函数，我想在每一行中执行相同的操作以删除按钮所在的行。当我使用单一功能时，它只是第一次工作而不是之后，我怎么能对所有按钮使用相同的功能呢？

这是我的代码：

  function AddValueinrow() {
     if(anotherTeamname=='DEV'){

     if(selectedValue=="dummy value1"){

        row = document.getElementById("DEVFirstrow");
     }

     if(selectedValue=="dummy value2"){
        row = document.getElementById("DEVSecondrow");
     }

    var w = row.insertCell(6);
    w.innerHTML = '<button onclick="Releaseentry()" type="button" id="show" class="btn btn-primary">Release</button>';

   }

  function Releaseentry() {

     if(anotherTeamname=='DEV'){

         if(selectedValue=="dummy value1"){
           $('#DEVmyTable > tr').eq(0).children('td').remove();
         }

         if(selectedValue=="dummy value 2"){
           $('#DEVmyTable > tr').eq(1).children('td').remove();
         }

      }
   }

Answer 1

使用.closest()查找父行，然后将其删除。

注意：使用event delegation将单个事件处理程序附加到容器，并对按钮点击作出反应，而不是使用内联onclick调用。

＆＃13;

$('#table').on('click', 'button', function() {
  $(this)
    .closest('tr')
    .children('td:not(:last-child)')
    .remove();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
  <tbody>
    <tr>
      <td>td11</td><td>td12</td>
      <td>
        <button type="button" class="btn btn-primary">Release</button>
      </td>
    </tr>
    <tr>
      <td>td21</td><td>td22</td>
      <td>
        <button type="button" class="btn btn-primary">Release</button>
      </td>
    </tr>
    <tr>
      <td>td31</td><td>td32</td>
      <td class="button">
        <button type="button" class="btn btn-primary">Release</button>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

如何多次在同一元素上使用相同的功能

1 个答案: