使用JQuery中的数组添加和删除表的元素

时间：2018-06-22 05:05:47

标签： javascript jquery html

这是我的索引和js文件。当我单击表格的第一行时，它起作用，但是当我再次单击时，它不起作用。一张桌子只能使用一次。第二个表中发生了同样的事情。我还在js文件中给出了类名。为什么不考虑类名。请也解释一下。

var t1 = [];
var t2 = [];
$('.table2 tr').each(function(row, tr) {
  t2[row] = $(tr).find('td:eq(0)').text()
});
$('.table1 tr').each(function(row, tr) {
  t1[row] = $(tr).find('td:eq(0)').text()
});
$(".addRow").on("click", function() {
  var $delete = $(this).find("td:eq(0)").text();
  t2.push($delete);
  t1.splice($.inArray($(this).find("td:eq(0)").text(), t1), 1);
  var tbody2 = $('.body2');
  $(".table2 tr").remove();
  for (var i = 0; i < t2.length; i++) {
    var tr = $('<tr class="deleteRow" style="color:#f44336;cursor:pointer"/>').appendTo(tbody2);
    tr.append('<td>' + t2[i] + '</td>');
  }
  var tbody1 = $('.body1');
  $(".table1 tr").remove();
  for (var i = 0; i < t1.length; i++) {
    var tr = $('<tr class="addRow" style="color:#32c24d;cursor:pointer"/>').appendTo(tbody1);
    tr.append('<td>' + t1[i] + '</td>');
  }
});

$(".deleteRow").on("click", function() {
  var $add = $(this).find("td:eq(0)").html();
  t1.push($add);
  t2.splice($.inArray($(this).find("td:eq(0)").text(), t2), 1);
  var tbody1 = $('.body1');
  $(".table1 tr").remove();
  for (var i = 0; i < t1.length; i++) {
    var tr = $('<tr class="addRow" style="color:#f44336;cursor:pointer"/>').appendTo(tbody1);
    tr.append('<td>' + t1[i] + '</td>');
  }
  var tbody2 = $('.body2');
  $(".table2 tr").remove();
  for (var i = 0; i < t2.length; i++) {
    var tr = $('<tr class="addRow" style="color:#32c24d;cursor:pointer"/>').appendTo(tbody2);
    tr.append('<td>' + t2[i] + '</td>');
  }
});
<!DOCTYPE html>
<html>

<head>
  <title>Table Manipulation</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    >
  </script>
</head>

<body>
  <div class="row">
    <div class="col-lg-4 col-md-4 col-lg-offset-2 col-md-offset-2 available">
      <label>Available Members</label>
      <table class="table table-bordered table1">
        <tbody class="body1">
          <tr class="addRow" style="color:#32c24d;cursor:pointer">
            <td>Tabrez</td>
          </tr>
          <tr class="addRow" style="color:#32c24d;cursor:pointer">
            <td>Akash</td>
          </tr>
          <tr class="addRow" style="color:#32c24d;cursor:pointer">
            <td>Keshav</td>
          </tr>
          <tr class="addRow" style="color:#32c24d;cursor:pointer">
            <td>Harsh</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="col-lg-4 col-md-4 selected">
      <label>Selected Members</label>
      <table class="table table-bordered table2">
        <tbody class="body2">
          <tr class="deleteRow" style="color:#f44336;cursor:pointer;">
            <td>Varun</td>
          </tr>
          <tr class="deleteRow" style="color:#f44336;cursor:pointer;">
            <td>Shanu</td>
          </tr>
          <tr class="deleteRow" style="color:#f44336;cursor:pointer;">
            <td>Salvi</td>
          </tr>
          <tr class="deleteRow" style="color:#f44336;cursor:pointer;">
            <td>Piyush</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <script src="table.js"></script>
</body>

</html>

2 个答案:

答案 0 :(得分：0)

使用jQuery的.on()附加事件（click）。您可以进行一些可能的更改：

$("tbody").on("click",".addRow", function() {......

和

$("tbody").on("click",".deleteRow", function() {......

我还认为您在第二个表的class="addRow"单击的第二个class="deleteRow"循环中错误地添加了for而不是.deleteRow：

var tr = $('<tr class="deleteRow" style="color:#32c24d;cursor:pointer"/>').appendTo(tbody2);


var t1 = [];
var t2 = [];
$('.table2 tr').each(function(row,tr){
    t2[row]=$(tr).find('td:eq(0)').text()
});
$('.table1 tr').each(function(row,tr){
    t1[row]=$(tr).find('td:eq(0)').text()
});
$("tbody").on("click",".addRow", function() {
  var $delete = $(this).find("td:eq(0)").text();
  t2.push($delete);
  t1.splice($.inArray($(this).find("td:eq(0)").text(),t1),1);
  var tbody2 = $('.body2');
  $(".table2 tr").remove();
  for(var i = 0;i < t2.length;i++){
    var tr = $('<tr class="deleteRow" style="color:#f44336;cursor:pointer"/>').appendTo(tbody2);
    tr.append('<td>' + t2[i] + '</td>');
  }
  var tbody1 = $('.body1');
  $(".table1 tr").remove();
  for(var i = 0;i < t1.length;i++){
    var tr = $('<tr class="addRow" style="color:#32c24d;cursor:pointer"/>').appendTo(tbody1);
    tr.append('<td>' + t1[i] + '</td>');
  }
});

$("tbody").on("click",".deleteRow", function() {
  var $add = $(this).find("td:eq(0)").html();
  t1.push($add);
  t2.splice($.inArray($(this).find("td:eq(0)").text(),t2),1);
  var tbody1 = $('.body1');
  $(".table1 tr").remove();
  for(var i = 0;i < t1.length;i++){
    var tr = $('<tr class="addRow" style="color:#f44336;cursor:pointer"/>').appendTo(tbody1);
    tr.append('<td>' + t1[i] + '</td>');
  }
  var tbody2 = $('.body2');
  $(".table2 tr").remove();
  for(var i = 0;i < t2.length;i++){
    var tr = $('<tr class="deleteRow" style="color:#32c24d;cursor:pointer"/>').appendTo(tbody2);
    tr.append('<td>' + t2[i] + '</td>');
  }
});
<!DOCTYPE html>
<html>
<head>
    <title>Table Manipulation</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">></script>
</head>
<body>
    <div class="row">
  <div class="col-lg-4 col-md-4 col-lg-offset-2 col-md-offset-2 available">
    <label>Available Members</label>
    <table class="table table-bordered table1">
      <tbody class="body1">
        <tr class="addRow" style="color:#32c24d;cursor:pointer">
          <td>Tabrez</td>
        </tr>
        <tr class="addRow" style="color:#32c24d;cursor:pointer">
          <td>Akash</td>
        </tr>
        <tr class="addRow" style="color:#32c24d;cursor:pointer">
          <td>Keshav</td>
        </tr>
        <tr class="addRow" style="color:#32c24d;cursor:pointer">
          <td>Harsh</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="col-lg-4 col-md-4 selected">
    <label>Selected Members</label>
    <table class="table table-bordered table2">
      <tbody class="body2">
        <tr class="deleteRow" style="color:#f44336;cursor:pointer;">
          <td>Varun</td>
        </tr>
        <tr class="deleteRow" style="color:#f44336;cursor:pointer;">
          <td>Shanu</td>
        </tr>
        <tr class="deleteRow" style="color:#f44336;cursor:pointer;">
          <td>Salvi</td>
        </tr>
        <tr class="deleteRow" style="color:#f44336;cursor:pointer;">
          <td>Piyush</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<script src="table.js"></script>
 </body>
</html>

答案 1 :(得分：0)

在您的代码中，您没有在selector函数中指定.on()。

  

如果省略selector或为null，则引用事件处理程序   作为直接。   提供选择器时，事件处理程序称为   委托。

     

事件委托（直接）方法将事件处理程序附加到   只有tbody这一个元素。

     

事件处理程序仅绑定到当前选定的元素；他们   您的代码调用.on()

时必须存在

因此，您需要为.on()函数提供一个选择器，如下所示。

$('.table1').on('click', '.addRow', function() {})

$('.table2').on('click', '.deleteRow', function() {})
  

委派的事件处理程序具有可以处理的优点   来自后代元素的事件，这些事件在以下位置添加到文档中   以后。

来源：http://api.jquery.com/on/

此外，您在deleteRow功能上有错误，并在下面的完整示例中得到解决。

var t1 = [];
var t2 = [];

$('.table2 tr').each(function(row, tr) {
  t2[row] = $(tr).find('td:eq(0)').text()
});

$('.table1 tr').each(function(row, tr) {
  t1[row] = $(tr).find('td:eq(0)').text()
});

$('.table1').on('click', '.addRow', function() {
  var $delete = $(this).find("td:eq(0)").text();
  t2.push($delete);
  t1.splice($.inArray($(this).find("td:eq(0)").text(), t1), 1);
  var tbody2 = $('.body2');
  $(".table2 tr").remove();
  for (var i = 0; i < t2.length; i++) {
    var tr = $('<tr class="deleteRow" style="color:#f44336;cursor:pointer"/>').appendTo(tbody2);
    tr.append('<td>' + t2[i] + '</td>');
  }
  var tbody1 = $('.body1');
  $(".table1 tr").remove();
  for (var i = 0; i < t1.length; i++) {
    var tr = $('<tr class="addRow" style="color:#32c24d;cursor:pointer"/>').appendTo(tbody1);
    tr.append('<td>' + t1[i] + '</td>');
  }
});

$('.table2').on('click', '.deleteRow', function() {
  var $add = $(this).find("td:eq(0)").html();
  t1.push($add);
  
  t2.splice($.inArray($(this).find("td:eq(0)").text(), t2), 1);
  var tbody1 = $('.body1');
  
  $(".table1 tr").remove();
  
  for (var i = 0; i < t1.length; i++) {
    var tr = $('<tr class="addRow" style="color:#32c24d;cursor:pointer"/>').appendTo(tbody1);
    tr.append('<td>' + t1[i] + '</td>');
  }
  var tbody2 = $('.body2');
  $(".table2 tr").remove();
  for (var i = 0; i < t2.length; i++) {
    var tr = $('<tr class="deleteRow" style="color:#f44336;cursor:pointer"/>').appendTo(tbody2);
    tr.append('<td>' + t2[i] + '</td>');
  }
});
<!DOCTYPE html>
<html>

<head>
  <title>Table Manipulation</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    >
  </script>
</head>

<body>
  <div class="row">
    <div class="col-lg-4 col-md-4 col-lg-offset-2 col-md-offset-2 available">
      <label>Available Members</label>
      <table class="table table-bordered table1">
        <tbody class="body1">
          <tr class="addRow" style="color:#32c24d;cursor:pointer">
            <td>Tabrez</td>
          </tr>
          <tr class="addRow" style="color:#32c24d;cursor:pointer">
            <td>Akash</td>
          </tr>
          <tr class="addRow" style="color:#32c24d;cursor:pointer">
            <td>Keshav</td>
          </tr>
          <tr class="addRow" style="color:#32c24d;cursor:pointer">
            <td>Harsh</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="col-lg-4 col-md-4 selected">
      <label>Selected Members</label>
      <table class="table table-bordered table2">
        <tbody class="body2">
          <tr class="deleteRow" style="color:#f44336;cursor:pointer;">
            <td>Varun</td>
          </tr>
          <tr class="deleteRow" style="color:#f44336;cursor:pointer;">
            <td>Shanu</td>
          </tr>
          <tr class="deleteRow" style="color:#f44336;cursor:pointer;">
            <td>Salvi</td>
          </tr>
          <tr class="deleteRow" style="color:#f44336;cursor:pointer;">
            <td>Piyush</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <script src="table.js"></script>
</body>

</html>

相关问题
最新问题