我有一个html表的状态列，可以有文本值"批准"， "拒绝"等。我希望将状态列与来自选定的无线电输入的输入值相匹配。对于每一行，如果状态列中的文本与选中的单选输入相匹配，则显示该行;否则，隐藏它。例如，"input[type="radio"]value"为";LATE"，则显示状态文本为";LATE"的所有行。并隐藏其他行。
var val = $(".radio:checked").val();
$('.table tbody tr').each(function () {
var latevalues = $.trim($(this).find('td').eq(6).text()) === val;
if (latevalues === val) {
$(this).parent().toggle();
}
});
<!-- begin snippet: js hide: false console: true babel: false --><div class="row">
<div class="col-sm-2">
<!-- <form> -->
<div class="radio">
<label>
<input type="radio" name="radio" class="radio" id="pending" value="LATE" checked="checked">
Pending(Default)
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio" class="radio" id="approve" value="A">
Approved
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio" class="radio" id="Rejected" value="R">
Rejected
</label>
</div>
</div>
</div>
<table class="table table-striped" style="width: 100%; table-layout: fixed;">
<thead>
<tr>
<th>Number</th>
<th>Comments</th>
<th>Submit</th>
<th>Occassionent</th>
<th>Review</th>
<th>Status</th> -----> column to match values
<th>Admin</th>
<th>By</th>
<th>Date</th>
<th>Managers Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="employees>
<span>49656</span>
<span> - </span>
<span> 24 May 2021</span>
</a>
</td>
<td>
</td>
<td>
<div> Due:</div>
<div> 24 May 2021</div>
<div> Act:</div>
<div> <b class="danger">9 Apr 2023</b></div>
</td>
<td>
</td>
<td>
<div> Due:</div>
<div> 16 Apr 2023</div>
<div> Act:</div>
<div> <span>9 Apr 2023</span>
</div>
</td>
<td>
<div> </div>
<div> </div>
<div><b class="success">LATE</b></div>---------->Status column Show this status if matches the input boxes
</td>
<td>
<div>
<dl>
<dd>Joe Anthony</dd>
</dl>
</div>
</td>
<td style="width: 90px;">
</td>
<td style="width: 80px;">
</td>
<td style="width: 70px;">
</td>
</tr>
<tr>
<td>
<a href="employees>
<span>49656</span>
<span> - </span>
<span> 24 May 2021</span>
</a>
</td>
<td>
</td>
<td>
<div> Due:</div>
<div> 24 May 2021</div>
<div> Act:</div>
<div> <b class="danger">9 Apr 2023</b></div>
</td>
<td>
</td>
<td>
<div> Due:</div>
<div> 16 Apr 2023</div>
<div> Act:</div>
<div> <span>9 Apr 2023</span>
</div>
</td>
<td>
<div> </div>
<div> </div>
<div><b class="success">A</b></div>---------->Status column Show this status if matches the input boxes
</td>
<td>
<div>
<dl>
<dd>Joe Anthony</dd>
</dl>
</div>
</td>
<td style="width: 90px;">
</td>
<td style="width: 80px;">
</td>
<td style="width: 70px;">
</td>
</tr>
<tr>
<td>
<a href="employees>
<span>49656</span>
<span> - </span>
<span> 24 May 2021</span>
</a>
</td>
<td>
</td>
<td>
<div> Due:</div>
<div> 24 May 2021</div>
<div> Act:</div>
<div> <b class="danger">9 Apr 2023</b></div>
</td>
<td>
</td>
<td style="width: 90px;">
<div> Due:</div>
<div> 16 Apr 2023</div>
<div> Act:</div>
<div> <span>9 Apr 2023</span>
</div>
</td>
<td>
<div> </div>
<div> </div>
<div><b class="success">R</b></div>----------> Status column Show this status if matches the input boxes
</td>
<td>
<div>
<dl>
<dd>Mark Anthony</dd>
</dl>
</div>
</td>
<td style="width: 90px;">
</td>
<td style="width: 80px;">
</td>
<td style="width: 70px;">
</td>
</tr>首先，jQuery的。eq方法是从零开始的，所以要得到第六个<td>在行的你需要使用.eq(5)(.eq(0) would get the first')。
接下来，您有一个额外的比较。将比较每个<td>中的文本与所选单选值是否相等的布尔结果赋给变量latevalues。然后将该布尔结果与选定的单选值if (latevalues === val)进行比较。这将始终返回false。
此外，您的单选值的大小写不一致(大写、小写等)。我建议将选择的单选值和与之比较的文本值小写，以使匹配有效地不区分大小写。
更正后的代码:
const updateState = () => {
const filterStatus = ($(".radio:checked").val() || '').toLowerCase();
$('.table tbody tr').each(function() {
const rowStatus = ($.trim($(this).find('td').eq(5).text()) || '').toLowerCase();
$(this).toggle(rowStatus === filterStatus);
});
};
$('input[name="radio"]').on('change', updateState);
updateState();<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-2">
<!-- <form> -->
<div class="radio">
<label>
<input type="radio" name="radio" class="radio" id="pending" value="LATE" checked="checked">
Pending(Default)
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio" class="radio" id="approve" value="A">
Approved
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio" class="radio" id="Rejected" value="R">
Rejected
</label>
</div>
</div>
</div>
<table class="table table-striped" style="width: 100%; table-layout: fixed;">
<thead>
<tr>
<th>Number</th>
<th>Comments</th>
<th>Submit</th>
<th>Occassionent</th>
<th>Review</th>
<th>Status</th> -----> column to match values
<th>Admin</th>
<th>By</th>
<th>Date</th>
<th>Managers Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="employees">
<span>49656</span>
<span> - </span>
<span> 24 May 2021</span>
</a>
</td>
<td>
</td>
<td>
<div> Due:</div>
<div> 24 May 2021</div>
<div> Act:</div>
<div> <b class=" danger">9 Apr 2023</b></div>
</td>
<td>
</td>
<td>
<div> Due:</div>
<div> 16 Apr 2023</div>
<div> Act:</div>
<div> <span>9 Apr 2023</span>
</div>
</td>
<td>
<div> </div>
<div> </div>
<div><b class="success">A</b></div>
</td>
<td>
<div>
<dl>
<dd>Joe Anthony</dd>
</dl>
</div>
</td>
<td style="width: 90px;">
</td>
<td style="width: 80px;">
</td>
<td style="width: 70px;">
</td>
</tr>
<tr>
<td>
<a href="employees">
<span>49656</span>
<span> - </span>
<span> 24 May 2021</span>
</a>
</td>
<td>
</td>
<td>
<div> Due:</div>
<div> 24 May 2021</div>
<div> Act:</div>
<div> <b class=" danger">9 Apr 2023</b></div>
</td>
<td>
</td>
<td style="width: 90px;">
<div> Due:</div>
<div> 16 Apr 2023</div>
<div> Act:</div>
<div> <span>9 Apr 2023</span>
</div>
</td>
<td>
<div> </div>
<div> </div>
<div><b class="success">R</b></div>
</td>
<td>
<div>
<dl>
<dd>Mark Anthony</dd>
</dl>
</div>
</td>
<td style="width: 90px;">
</td>
<td style="width: 80px;">
</td>
<td style="width: 70px;">
</td>
</tr>
</tbody>
</table>