我有一个html表的状态列，可以有文本值的“批准”，“拒绝”等，我想匹配的状态列的输入值从选定的电台输入。对于每一行，如果在状态列的文本匹配选定的电台输入，显示行;否则，将其隐藏。例如，如果input[type="radio"]值为“LATE”，则显示状态td文本为“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();
}
});<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="approved">
Approved
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="radio" class="radio" id="Rejected" value="rejected">
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>---------->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">Rejected</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>
1条答案
按热度按时间zwghvu4y1#
首先，jQuery的.eq method是 * 从零开始 * 的，所以要获取行中的第六个
<td>，需要使用.eq(5)（.eq(0) would get the first'）。接下来，你有一个额外的比较。你将每个
<td>中的文本与选定的radio值进行相等比较的布尔结果赋给变量latevalues。然后你将这个布尔结果与选定的radio值进行比较：if (latevalues === val)。这将始终返回false。此外，您的单选框值的大小写不一致（大写、小写等）。我建议将所选单选框值和与之比较的文本值小写，以使匹配有效地不区分大小写。
更正代码：