我有这个表，每行在第 2 行中有下拉列表。我的问题是，如果在同一行值中例如有名为"交付"的值，我如何删除下拉列表？ 这是我的小提琴：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>使用 children(( 和 eq(( 函数的组合来获得结果。
因为我们知道交货列每次都是第 3 列。
$(function() {
$('#my_id tbody tr').each(function(i, el) {
const deliveryColumn = $(this).children().eq(3).html();
if (deliveryColumn === 'Delivery') {
$(this).children().eq(2).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>
<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>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>