只是想知道是否有人知道要解决这个问题,实际上我想突出显示与'a link'类似的'table row',我的意思是如果我点击包含rel属性值= X的链接那么包含rel属性值的表tr也会以红色突出显示,也会反向显示
试一试,但尚未成功
虚构>>
<div class="part-container">
<div class="part-left">
<div class="placeholder">
<a href="#9505092011120026" title=" " alt=" " class="part_number_9505092011120026" rel="part_number_9505092011120026" style="top:73px;left:41px;"> 9505092011120026</a>
<a href="#1905092011120046" title=" " alt=" " class="part_number_1905092011120046" rel="part_number_1905092011120046" style="top:95px;left:77px;"> 1905092011120046</a>
<a href="#5305092011120107" title=" " alt=" " class="part_number_5305092011120107" rel="part_number_5305092011120107" style="top:07px;left:93px;"> 5305092011120107</a>
<a href="#1805092011120139" title=" " alt=" " class="part_number_1805092011120139" rel="part_number_1805092011120139" style="top:25px;left:85px;"> 1805092011120139</a>
<a href="#9805092011120157" title=" " alt=" " class="part_number_9805092011120157" rel="part_number_9805092011120157" style="top:79px;left:67px;"> 9805092011120157</a>
<a href="#405092011120246" title=" " alt=" " class="part_number_405092011120246" rel="part_number_405092011120246" style="top:19px;left:75px;"> 405092011120246</a>
<a href="#3505092011120325" title=" " alt=" " class="part_number_3505092011120325" rel="part_number_3505092011120325" style="top:85px;left:67px;"> 3505092011120325</a>
<a href="#1905092011120345" title=" " alt=" " class="part_number_1905092011120345" rel="part_number_1905092011120345" style="top:41px;left:21px;"> 1905092011120345</a>
<a href="#1005092011120419" title=" " alt=" " class="part_number_1005092011120419" rel="part_number_1005092011120419" style="top:39px;left:29px;"> 1005092011120419</a>
</div>
</div>
<div class="part-right">
<div class="table-responsive" id="right-table">
<table class="table table-striped">
<thead>
<tr>
<th>Part Number</th>
<th>Deskripsi</th>
<th>Het</th>
<th>Cart</th>
</tr>
</thead>
<tbody>
<tr class="part_number" rel="part_number_9505092011120026">
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
</tr>
<tr class="part_number">
<td>1,002</td>
<td>amet</td>
<td>consectetur</td>
<td>adipiscing</td>
</tr>
<tr class="part_number">
<td>1,003</td>
<td>Integer</td>
<td>nec</td>
<td>odio</td>
</tr>
<tr class="part_number">
<td>1,003</td>
<td>libero</td>
<td>Sed</td>
<td>cursus</td>
</tr>
<tr class="part_number">
<td>1,004</td>
<td>dapibus</td>
<td>diam</td>
<td>Sed</td>
</tr>
<tr class="part_number" rel="part_number_1905092011120046">
<td>1,005</td>
<td>Nulla</td>
<td>quis</td>
<td>sem</td>
</tr>
<tr class="part_number">
<td>1,006</td>
<td>nibh</td>
<td>elementum</td>
<td>imperdiet</td>
</tr>
<tr class="part_number">
<td>1,007</td>
<td>sagittis</td>
<td>ipsum</td>
<td>Praesent</td>
</tr>
<tr class="part_number" rel="part_number_5305092011120107">
<td >1,008</td>
<td>Fusce</td>
<td>nec</td>
<td>tellus</td>
</tr>
<tr class="part_number">
<td>1,009</td>
<td>augue</td>
<td>semper</td>
<td>porta</td>
</tr>
<tr class="part_number">
<td>1,010</td>
<td>massa</td>
<td>Vestibulum</td>
<td>lacinia</td>
</tr>
<tr class="part_number">
<td>1,011</td>
<td>eget</td>
<td>nulla</td>
<td>Class</td>
</tr>
<tr class="part_number" rel="part_number_1805092011120139">
<td>1,012</td>
<td>taciti</td>
<td>sociosqu</td>
<td>ad</td>
</tr>
<tr class="part_number">
<td>1,013</td>
<td>torquent</td>
<td>per</td>
<td>conubia</td>
</tr>
<tr class="part_number" rel="part_number_9805092011120157">
<td>1,014</td>
<td>per</td>
<td>inceptos</td>
<td>himenaeos</td>
</tr>
<tr class="part_number">
<td>1,015</td>
<td>sodales</td>
<td>ligula</td>
<td>in</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
CSS:
.part-container {
width: 100%;
display: block;
height: 551px;
}
.part-left {
width: 61%;
float: left;
}
.part-right {
width: 39%;
float: right;
}
.red {
background: red;
}
JS:
$(".placeholder a").click(function(e){
e.preventDefault();
var same_rel ="."+$(this).attr("rel");
$("#right-table tbody tr.part_number").removeClass("red");
$("#right-table tbody tr").find(same_rel).addClass("red");
});
答案 0 :(得分:1)
除了@ phillip100和@Alvaro之外你还需要覆盖bootstrap的CSS。
JS:
$(".placeholder a").click(function(e){
e.preventDefault();
var same_rel = $(this).attr("rel");
$("#right-table tbody tr.part_number").removeClass("red");
$('#right-table tbody tr[rel='+same_rel+']').addClass("red");
});
CSS:
...
#right-table .red {
background-color: red;
}
工作JS小提琴:http://jsfiddle.net/2v64myqa/19/
答案 1 :(得分:0)
首先 - 你混淆了属性rel
和class
。从rel
移除<tr>
并将值添加为类:
...
<tr class="part_number part_number_9505092011120026">
...
下一步 - 您正在使用给定的类搜索<tr>
包含元素:
$("#right-table tbody tr").find(same_rel).addClass("red");
但不是上述内容,您应该查找该类的<tr>
:
$(".placeholder a").click(function(e){
e.preventDefault();
var same_rel = $(this).attr("rel");
$("#right-table tbody tr.part_number").removeClass("red");
$("#right-table tbody tr."+same_rel).addClass("red");
});