时间戳

首页 > 解决方案 > 使用javascript删除基于列中重复值的HTML表格行元素？

javascript - 使用javascript删除基于列中重复值的HTML表格行元素？

问题描述

我有一个表，如果第一列中的任何值相同，我会尝试删除行。我如何使用 javascript 或 jquery 来实现这一点？

         
  $("table tr").each(function () {
  var tdText = $(this).text();

  $("table tr")
      .filter(function () {
          return tdText == $(this).text();
      })
      .not(":first")
      .remove();

  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
      <tr>
      <th>Product Code</th>
      <th>Item Name</th>
      <th>Long Description</th>
      <th>Material</th>
      <th>Style</th>
      </tr>
  </thead>
  <tbody>
        <tr>
          <td><input></td>
          <td><input></td>
          <td><input></td>
          <td><input></td>
          <td><input></td>
          </tr>
        <tr>
          <td><input></td>
          <td><input></td>
          <td><input></td>
          <td><input></td>
          <td><input></td>
        </tr>
            <tr>
          <td><input></td>
          <td><input></td>
          <td><input></td>
          <td><input></td>
          <td><input></td>
        </tr>
      </tbody>
    </table>

标签： javascripthtml

解决方案

function removeDuplicates()  {
  var tableRows = $('#myTable').find("tbody tr");
  var seens = [];
  for(var i = 0; i < tableRows.length; i++) {
    var tRow = $(tableRows[i]);
    var cell1Content = tRow.find("td:first-child input").val();
    if(seens.indexOf(cell1Content) != -1) {
      tRow.remove();
    } else {
      seens.push(cell1Content);
    }
  }
}

function addRow()  {
  $('#myTable').find("tbody").append(['<tr>',
                                      '    <td><input></td>',
                                      '    <td><input></td>',
                                      '    <td><input></td>',
                                      '    <td><input></td>',
                                      '    <td><input></td>',
                                      '  </tr>'].join(""));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
  <thead>
      <tr>
      <th>Product Code</th>
      <th>Item Name</th>
      <th>Long Description</th>
      <th>Material</th>
      <th>Style</th>
      </tr>
  </thead>
  <tbody>
    <tr>
      <td><input value="1"></td>
      <td><input></td>
      <td><input></td>
      <td><input></td>
      <td><input></td>
      </tr>
    <tr>
      <td><input value="3"></td>
      <td><input></td>
      <td><input></td>
      <td><input></td>
      <td><input></td>
    </tr>
     <tr>
      <td><input value="1"></td>
      <td><input></td>
      <td><input></td>
      <td><input></td>
      <td><input></td>
    </tr>
     <tr>
      <td><input value="2"></td>
      <td><input></td>
      <td><input></td>
      <td><input></td>
      <td><input></td>
    </tr>
     <tr>
      <td><input value="3"></td>
      <td><input></td>
      <td><input></td>
      <td><input></td>
      <td><input></td>
    </tr>
     <tr>
      <td><input value="4"></td>
      <td><input></td>
      <td><input></td>
      <td><input></td>
      <td><input></td>
    </tr>
     <tr>
      <td><input value="5"></td>
      <td><input></td>
      <td><input></td>
      <td><input></td>
      <td><input></td>
    </tr>
  </tbody>
</table>
<div>
  <button onclick="addRow()">Add Row</button>
  <button onclick="removeDuplicates()">Remove Duplicates</button>
</div>

推荐阅读