在HTML表中设置类，但不在整个列中设置类

时间：2017-11-30 09:34:41

标签： javascript jquery html css

在这种情况下，我有一个带有表格的HTML文件，该表格中填充了XML个数据。最后一列（10）中有一个数字：1,2,3,4或5.我有5行jQuery寻找数字并给出相应数字的单元格a特定的类，这个工作正常（单元格的0％不透明度，因为它不是＆＃34;显示＆＃34;，但对我们来说，它的工作原理很好）。

现在的问题是：第7列和第8列需要在没有整列的情况下获取该类，只需要具有特定数字的行。

我有一个jsfiddle所以你可以看到代码和内容：

jQuery：

$("td:nth-child(10):contains('1')").addClass('disaster');
$("td:nth-child(10):contains('2')").addClass('high');
$("td:nth-child(10):contains('3')").addClass('average');
$("td:nth-child(10):contains('4')").addClass('warning');
$("td:nth-child(10):contains('5')").addClass('information');

注意：表中的数据仅用于测试，真正的xml将以随机顺序的100行中的那些数量为1,2,3,4,5。

编辑：了解它的外观：enter image description here

＆＃13;
＆＃13; 
$("td:nth-child(10):contains('1')").addClass('disaster');
$("td:nth-child(10):contains('2')").addClass('high');
$("td:nth-child(10):contains('3')").addClass('average');
$("td:nth-child(10):contains('4')").addClass('warning');
$("td:nth-child(10):contains('5')").addClass('information');
＆＃13; 
td:nth-child(10) { 
opacity: 0;
}
.disaster{	
background-color: #E45858
}
.high{	
background-color: #E87658
}
.average{	
background-color: #FEA058
}
.warning{	
background-color: #FEC858
}
.information{
background-color: #7498FE
}
/*CSS for main elements*/
div {	
max-width: 2600px;
display: block;
}
body { 	
font-family: Arial, Tahoma, Verdana, sans-serif;
background-color: #FFFFFF;
}
table { 	
text-align: left;
border-collapse: collapse;
}
th	{	
font-size: 75%;	
font-weight: normal;
color: 	#768C98;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 2px solid #DCE2E4;
}
td	{	
font-size: 75%;	
color: #1F2C33;
height: 25px;
padding-top: 1px;
padding-bottom: 1px;
border-bottom: 1px solid #EAEEF0;
}	
img {	
position: absolute; left: -100px;
margin-top: 165px;
transform: rotate(270deg);
}
/*CSS for Hover*/
td:nth-child(1):hover{	
text-decoration: underline;
}
td:nth-child(1) {	
background-color: #FFFFFF;
}
td:nth-child(2) {	
background-color: #FFFFFF;
}
tr.NoHover:hover{ 	
background-color: #FFFFFF;
}
tr:hover {		
background-color: #E8F5FF;
}
/*Column specific CSS*/
th.col1 {	
text-align: right;
width: 240px;
padding-right: 18px
}
th.col2 {	
width: 11px;
padding: none;	
}
th.col3 {	
text-align: left;
width: 188px;
padding-left: 10px;
}
th.col4 {	
text-align: left;
width: 70px;
}
th.col5 {	
text-align: left;
width: 77px;
padding-left: 82px;
}
th.col6 {	
text-align: left;
width: 430px;
}
th.col7 {	
text-align: left;
padding-left: 10px;
width: 497px;
}
th.col8 {	
text-align: left;
width: 498px;
}
th.col9 {	
text-align: left;
padding-left: 10px;
width: 75px;
}
td:nth-child(1)	{	
text-align: right;
color: #0274B8;
padding-right: 18px;
border-right: 2px solid #AAD6F0;
border-bottom: none;
}
td:nth-child(2) { 
color: white;
border-bottom: none;
width: 11px;
padding: none;
}
td:nth-child(3) {	
text-align: left;
text-decoration: underline dotted; 
padding-left: 10px;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(4) {	
text-align: left;
color: #DC0000;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(5) {	
text-align: right;
text-decoration: underline dotted;
padding-right: 15px;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(6) {	
text-align: left;
text-decoration: underline dotted; 	
border-bottom: 1px solid #EAEEF0;						
}
td:nth-child(7) {	
text-align: left;
text-decoration: underline dotted ;
padding-left: 10px;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(8) {	
text-align: left;
text-decoration: underline dotted;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(9) {	
text-align: left;
padding-left: 10px; 
border-bottom: 1px solid #EAEEF0;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<br><br>
<div id="main">
	<table id="Table">
		<thead>
			<tr class="NoHover">
				<th class="col1" scope='col' >Time&#9660;</th>
				<th class="col2" scope='col' ></th>
				<th class="col3" scope='col' >Client</th>
				<th class="col4" scope='col' >Status</th>
				<th class="col5" scope='col' >Site</th>
				<th class="col6" scope='col' >Host</th>
				<th class="col7" scope='col' >Problem &bull; Cause</th>
				<th class="col8" scope='col' ></th>
				<th class="col9" scope='col' >Frequency</th>
				<th class="col10" scope='col'></th>
			</tr>
		</thead>
	<tbody id="TableData"> 
	  <tr>
    <td>2017-11-22</td>
    <td>1</td>
    <td>Client 1</td>
    <td>FAILING</td>
    <td>Site 1</td>
    <td>PC1</td>
    <td>test1</td>
    <td>Unable to open service</td>
    <td>24x7</td>
    <td>1</td>
  </tr>
  <tr>
    <td>2017-11-22</td>
    <td>1</td>
    <td>Client 2</td>
    <td>FAILING</td>
    <td>Site 2</td>
    <td>PC2</td>
    <td>test2</td>
    <td>Unable to open service</td>
    <td>24x7</td>
    <td>2</td>
  </tr>
  <tr>
    <td>2017-11-22</td>
    <td>1</td>
    <td>Client 3</td>
    <td>FAILING</td>
    <td>Site 3</td>
    <td>PC3</td>
    <td>test3</td>
    <td>Unable to open service</td>
    <td>24x7</td>
    <td>3</td>
  </tr>
  <tr>
    <td>2017-11-22</td>
    <td>1</td>
    <td>Client 4</td>
    <td>FAILING</td>
    <td>Site 4</td>
    <td>PC4</td>
    <td>test4</td>
    <td>Unable to open service</td>
    <td>24x7</td>
    <td>4</td>
  </tr>
  <tr>
    <td>2017-11-22</td>
    <td>1</td>
    <td>Client 5</td>
    <td>FAILING</td>
    <td>Site 5</td>
    <td>PC5</td>
    <td>test5</td>
    <td>Unable to open service</td>
    <td>24x7</td>
    <td>5</td>
  </tr>
 </tbody>
	</table>
</div>
</body>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：6)

我认为您正在寻找.siblings()选择器：

    $("td:nth-child(10):contains('1')").siblings('td:nth-child(7), td:nth-child(8)').addClass('disaster');
    $("td:nth-child(10):contains('2')").siblings('td:nth-child(7), td:nth-child(8)').addClass('high');
    $("td:nth-child(10):contains('3')").siblings('td:nth-child(7), td:nth-child(8)').addClass('average');
    $("td:nth-child(10):contains('4')").siblings('td:nth-child(7), td:nth-child(8)').addClass('warning');
    $("td:nth-child(10):contains('5')").siblings('td:nth-child(7), td:nth-child(8)').addClass('information');

小提琴：https://jsfiddle.net/8sL86sc7/2/

答案 1 :(得分：5)

这样的事可能吗？ （Fiddle）

$("tr").each(function(index) {
    var row = $(this),
    lastCol = row.find('td:nth-child(10)'),
    appendTo = row.find('td:nth-child(7), td:nth-child(8), td:nth-child(10)');
    switch(lastCol.text()) {
        case '1':
        appendTo.addClass('disaster');
        break;
        case '2':
        appendTo.addClass('high');
        break;
        case '3':
        appendTo.addClass('average');
        break;
        case '4':
        appendTo.addClass('warning');
        break;
        case '5':
        appendTo.addClass('information');
        break;
    }
});

如果有很多行，并且您不需要为添加的课程发生额外的事情，这可能是过度的。 <{1}}选择器（如this answer中）就足够了。

相关问题
最新问题