Question

我尝试将行中的第二个单元格与表格中所有行的第二个单元格进行比较，然后使用jQuery将行复制到另一个表格中的表格中。但我无法弄清楚条件条款。这就是我所拥有的：

$(function(){
  $(document).on("click","#submit",function(){
    var getSelectedRows = $("#schedule input:checked").parents("tr").clone();
    if ($('#results').find("tr").filter(":contains('$('td:first', $(this).parents('tr')).text()')"))
      alert("You can't have two events at the same time!");
    else
      $("#results tbody").append(getSelectedRows);
  })
})

我有这个HTML：

<table id="schedule" class="table table-stripped table-bordered table-hover">
  <thead>
    <tr>
      <th></th>
      <th>time</th>
      <th>room</th>
      <th>presenter</th>
      <th>title</th>
      <th>detail</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" value="yes"></td>
      <td>9:00am</td>
      <td>SE135</td>
      <td>aaaaa</td>
      <td>aaaaaa</td>
      <td>aaaaaaaa</td>
    </tr>
    <tr>
      <td><input type="checkbox" value="yes"></td>
      <td>9:00am</td>
      <td>SE145</td>
      <td>aaaaab</td>
      <td>aaaaaa</td>
      <td>aaaaaaaa</td>
    </tr>
  </tbody>
</table>
<input id="submit" type="button" value="Submit">
</article>
<table id="results">
  <thead>
    <tr>
      <th></th>
      <th>time</th>
      <th>room</th>
      <th>presenter</th>
      <th>title</th>
      <th>detail</th>
    </tr>
  </thead>
  <tbody>


  </tbody>
</table>

感谢任何帮助。提前谢谢。

Answer 1

首先，您需要遍历所选行的所有实例，并将每一行与结果表中的现有行进行比较。

我会在相反的流程中执行此操作....收集结果中已存在的值的数组...然后当您遍历主表中的已检查行时，将该值与数组进行比较。

请注意，添加公共类和data-属性也有助于简化操作

$(function() {
  $(document).on("click", "#submit", function() {
    var $resBody = $('#results tbody'),
      // create array of rooms already in results
      existingRooms = $resBody.find('tr[data-room]').map(function() {
        return $(this).data('room')
      }).get();
    // log array for demo purposes
    console.log('existingRooms', JSON.stringify(existingRooms));
    
    // now loop through the selected checkboxes
    $("#schedule input:checked").each(function() {
      var $row = $(this).closest('tr'),
        room = $row.data('room');
      // is current room instance already in array?
      if ($.inArray(room, existingRooms) === -1) {
        $resBody.append($row.clone());
      } else {
        alert("Room " + room +' already selected');
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="schedule" class="table table-stripped table-bordered table-hover">
  <thead>
    <tr>
      <th></th>
      <th>time</th>
      <th>room</th>
      <th>presenter</th>
      <th>title</th>
      <th>detail</th>
    </tr>
  </thead>
  <tbody>
    <tr data-room="SE135">
      <td><input type="checkbox" value="yes"></td>
      <td>9:00am</td>
      <td class="room">SE135</td>
      <td>aaaaa</td>
      <td>aaaaaa</td>
      <td>aaaaaaaa</td>
    </tr>
    <tr data-room="SE145">
      <td><input type="checkbox" value="yes" checked></td>
      <td>9:00am</td>
      <td class="room">SE145</td>
      <td>aaaaab</td>
      <td>aaaaaa</td>
      <td>aaaaaaaa</td>
    </tr>
  </tbody>
</table>
<input id="submit" type="button" value="Submit">

<table id="results">
  <thead>
    <tr>
      <th></th>
      <th>time</th>
      <th>room</th>
      <th>presenter</th>
      <th>title</th>
      <th>detail</th>
    </tr>
  </thead>
  <tbody>


  </tbody>
</table>

在使用jQuery将行从另一个表复制到表之前，将单元格与表进行比较

1 个答案: