Question

我编写了一个JavaScript函数来删除表中的选定行并且它工作正常但是当我尝试编写一些jQuery来改变某些按钮的颜色时它不起作用。我不知道我做错了什么。

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
  <button type="button" onclick="DeleteRow()" class="btn"> delete </button>
  <table id="myTable">
    <thead>
      <tr class="header">
        <th>1</th>
        <th>2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td> <input type="checkbox" name="check" value="check" class="checkbox"> </td>
        <td> 1 </td>
      </tr>
      <tr>
        <td> <input type="checkbox" name="check" value="check" class="checkbox"> </td>
        <td> 2 </td>
      </tr>
    </tbody>
  </table>
  <script>
    function DeleteRow() { //this function delete selected rows from table
      var i, chkbx, td;
      var table = document.getElementById("myTable"); //table itself
      var rows = table.getElementsByTagName("tr"); //rows in table-body         
      var numRows = rows.length; //number of rows
      for (i = 1; i < numRows; i++) { //in this "for loop" , I try to remove selected rows
        td = rows[i].getElementsByTagName("td")[0];
        chkbx = td.getElementsByTagName("input")[0];
        if (chkbx.checked == true) {
          table.deleteRow(i);
          --i; //each time we delete one row we decrease i      
        }
      }
      $(document).ready(function() {
        $(".btn").css("background-color", "#ff0000");
      }); //this jquery wont work
    }
  </script>
</body>

</html>

Answer 1

循环中有几个问题导致错误，所以我修复了这些问题，并将内联事件侦听器移动到JS文件中。代码中的注释。我也从jQuery切换到vanilla JS，因为如果你在其他地方使用vanilla JS，没有理由使用它。

// Grab the button and add an click event for DeleteRow
document.querySelector(".btn").addEventListener('click', DeleteRow, false)

function DeleteRow() { 
  var i, chkbx, td;
  var table = document.getElementById("myTable");
  var rows = table.getElementsByTagName("tr"); 

  // When removing items from the DOM it's usually a good idea
  // to reverse the loop and simply use the length of the array.
  // That way you don't have to decrement the index manually
  for (let i = rows.length - 1; i > 0; i--) {
    td = rows[i].getElementsByTagName("td")[0];
    chkbx = td.getElementsByTagName("input")[0];
    if (chkbx.checked == true) {
      table.deleteRow(i);
    }
  }

  // You don't have to use jQuery (it's a waste if everything 
  // else is native JS. Here we use `this` which is the element attached
  // the click event
  this.style.backgroundColor = '#ff0000';
}

<button type="button" class="btn"> delete </button>
<table id="myTable">
  <thead>
    <tr class="header">
      <th>1</th>
      <th>2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" name="check" value="check" class="checkbox"> </td>
      <td> 1 </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" value="check" class="checkbox"> </td>
      <td> 2 </td>
    </tr>
  </tbody>
</table>

Answer 2

您的代码的简短版本可能如下所示。这只会在选择/删除行时更改按钮背景。

function DeleteRow() { //this function delete selected rows from table
  var i, chkbx, td;
  var table = $("#myTable tbody>tr input:checked"); //table itself

  table.each(function() {
    $(this).parent().parent().remove();
  })
  if (table.length) {
    return true;
  }


}
$(document).ready(function() {
  $('#del').click(function() {
    if (DeleteRow()) {
      $(".btn").css("background-color", "#ff0000");
    }
  }); //this jquery wont work
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn" id="del"> delete </button>
<table id="myTable">
  <thead>
    <tr class="header">
      <th>1</th>
      <th>2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> <input type="checkbox" name="check" value="check" class="checkbox"> </td>
      <td> 1 </td>
    </tr>
    <tr>
      <td> <input type="checkbox" name="check" value="check" class="checkbox"> </td>
      <td> 2 </td>
    </tr>
  </tbody>
</table>

Answer 3

如果你已经有了jQuery，为什么要将它与普通的js混合使用？你可以非常简单地在jQuery中完成这个：

$statement = $conn->prepare($query);
$statement->execute($rowdata);

删除表中的行后不执行代码

3 个答案: