javascript - 从 html 表格中删除下拉列表

我有这个表，每行在第 2 行中都有下拉列表。我的问题是，如果同一行中存在名为“Delivery”的值，我如何删除下拉列表？这是我的 fiddle :https://jsfiddle.net/fp67wLqz/

window.onload = $('#my_id tbody tr').each(function() {
  var $ArtNo = $(this).find("td:eq(7)").html();
  if ($ArtNo == 'Delivery'){
    $(this).parents("tr").find("td:eq(2)").empty();

  }

});

table {
  border-collapse: collapse;
  border: 1px black solid;
  font: 12px sans-serif;
  width: 100%;
  table-layout: auto;
}

td {
  border: 1px black solid;
  text-align: left;
  padding: 2px;
}

thead:hover {
  text-decoration: none !important;
}

thead tr:first-child {
  color: white;
  text-align: center;
  background-color: #5bc0de;
  padding: 10px;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}

tr:hover {
  background-color: #5bc0de;
}

button {
  display: inline;
  padding: 50px;
}

input button {
  display: inline;
}

.dropbtn {
  background-color: blue;
}

.table-responsive {
  overflow-y: auto;
  height: 800px;
}

.table-responsive table {
  border-collapse: collapse;
  width: 100%;
}

.table-responsive thead th {
  position: sticky;
  top: 0;
  background-color: #5bc0de;
  padding: 2px;
}

 ::-webkit-scrollbar {
  width: 12px;
}

 ::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

.myButtons {
  display: inline;
  padding: 20px;
}

<html>

<head>
  <title>Filtered CSV File</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="static/bootstrap.min.css" rel="stylesheet" media="screen">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.18/datatables.min.css" />
</head>

<body>
  <br/>
  <br/>
  <br/>
  <div class="table-responsive">
    <table class="dataframe my_class" id="my_id">
      <thead>
        <tr style="text-align:right;">
          <th> </th>
          <th>col1</th>
          <th>col2</th>
          <th>col3</th>
          <th>col4</th>
          <th>col5</th>
          <th>col6</th>
          <th>col7</th>
          <th>col8</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <th>1</th>
          <td>row1</td>
          <td>
            <select>
              <option>a</option>
              <option>BB</option>
            </select>
          </td>
          <td>row1</td>
          <td>row1</td>
          <td>row1</td>
          <td>row1</td>
          <td>row1</td>
          <td>row1</td>
        </tr>
        <tr>
          <th>2</th>
          <td>row2</td>
          <td>
            <select>
              <option>a</option>
              <option>BB</option>
            </select>
          </td>
          <td>row2</td>
          <td>row2</td>
          <td>row2</td>
          <td>row2</td>
          <td>Delivery</td>
          <td>row2</td>
        </tr>
        <tr>
          <th>3</th>
          <td>row3</td>
          <td>
            <select>
              <option>a</option>
              <option>BB</option>
            </select>
          </td>
          <td>row3</td>
          <td>row3</td>
          <td>row3</td>
          <td>row3</td>
          <td>row3</td>
          <td>row3</td>
        </tr>
      </tbody>
    </table>

我也尝试过仅使用 empty() 或 html("") 但没有成功。任何帮助都会很棒

编辑这就是我希望我的表格在从第二行删除下拉列表后的样子:

table {
  border-collapse: collapse;
  border: 1px black solid;
  font: 12px sans-serif;
  width: 100%;
  table-layout: auto;
}

td {
  border: 1px black solid;
  text-align: left;
  padding: 2px;
}

thead:hover {
  text-decoration: none !important;
}

thead tr:first-child {
  color: white;
  text-align: center;
  background-color: #5bc0de;
  padding: 10px;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}

tr:hover {
  background-color: #5bc0de;
}

button {
  display: inline;
  padding: 50px;
}

input button {
  display: inline;
}

.dropbtn {
  background-color: blue;
}

.table-responsive {
  overflow-y: auto;
  height: 800px;
}

.table-responsive table {
  border-collapse: collapse;
  width: 100%;
}

.table-responsive thead th {
  position: sticky;
  top: 0;
  background-color: #5bc0de;
  padding: 2px;
}

 ::-webkit-scrollbar {
  width: 12px;
}

 ::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

.myButtons {
  display: inline;
  padding: 20px;
}

<html>

<head>
</head>

<body>
  <br/>
  <br/>
  <br/>
  <div class="table-responsive">
    <table class="dataframe my_class" id="my_id">
      <thead>
        <tr style="text-align:right;">
          <th> </th>
          <th>col1</th>
          <th>col2</th>
          <th>col3</th>
          <th>col4</th>
          <th>col5</th>
          <th>col6</th>
          <th>col7</th>
          <th>col8</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <th>1</th>
          <td>row1</td>
          <td>
            <select>
              <option>a</option>
              <option>BB</option>
            </select>
          </td>
          <td>row1</td>
          <td>row1</td>
          <td>row1</td>
          <td>row1</td>
          <td>row1</td>
          <td>row1</td>
        </tr>
        <tr>
          <th>2</th>
          <td>row2</td>
          <td></td>
          <td>Delivery</td>
          <td>row2</td>
          <td>row2</td>
          <td>row2</td>
          <td>row2</td>
          <td>row2</td>
        </tr>
        <tr>
          <th>3</th>
          <td>row3</td>
          <td>
            <select>
              <option>a</option>
              <option>BB</option>
            </select>
          </td>
          <td>row3</td>
          <td>row3</td>
          <td>row3</td>
          <td>row3</td>
          <td>row3</td>
          <td>row3</td>
        </tr>
      </tbody>
    </table>
  </div>

</body>

</html>

最佳答案

假设交货始终位于相应行的第三个单元格中，这可以实现您想要的效果。

window.onload = $('#my_id tbody tr').each(function() {
  var artNo = $(this).find("td:eq(2)").html();
  if (artNo == 'Delivery') {
    $(this).find("td:eq(1)").empty()
  }
  /*assuming you dont know in which cell delievery occurs:
  let delete = false;
  $(this).find('td').each (function() {
    let art = $(this).text()
    if(art == 'Delivery'){
      delete = true;
    }
  });
  if(delete){
  $(this).find('td').each (function() {
    $(this).find("td:eq(1)").empty()
  });
  }*/
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
</head>

<body>
  <br/>
  <br/>
  <br/>
  <div class="table-responsive">
    <table class="dataframe my_class" id="my_id">
      <thead>
        <tr style="text-align:right;">
          <th> </th>
          <th>col1</th>
          <th>col2</th>
          <th>col3</th>
          <th>col4</th>
          <th>col5</th>
          <th>col6</th>
          <th>col7</th>
          <th>col8</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <th>1</th>
          <td>row1</td>
          <td>
            <select>
              <option>a</option>
              <option>BB</option>
            </select>
          </td>
          <td>row1</td>
          <td>row1</td>
          <td>row1</td>
          <td>row1</td>
          <td>row1</td>
          <td>row1</td>
        </tr>
        <tr>
          <th>2</th>
          <td>row2</td>
          <td>
            <select>
              <option>a</option>
              <option>BB</option>
            </select>
          </td>
          <td>Delivery</td>
          <td>row2</td>
          <td>row2</td>
          <td>row2</td>
          <td>row2</td>
          <td>row2</td>
        </tr>
        <tr>
          <th>3</th>
          <td>row3</td>
          <td>
            <select>
              <option>a</option>
              <option>BB</option>
            </select>
          </td>
          <td>row3</td>
          <td>row3</td>
          <td>row3</td>
          <td>row3</td>
          <td>row3</td>
          <td>row3</td>
        </tr>
      </tbody>
    </table>

关于javascript - 从 html 表格中删除下拉列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59413338/

javascript - 从 html 表格中删除下拉列表

上一篇：javascript - React显示没有页眉和页脚的路由容器

下一篇：javascript - 如何在传单中查找相邻的多边形