在 HTML 表中设置类，但不是为整个列答案

【问题标题】：Set class in HTML table, but not for the entire column在 HTML 表中设置类，但不是为整个列
【发布时间】：2017-11-30 09:34:41
【问题描述】：

情况就是这样，我有一个带有表格的HTML 文件，表格中充满了XML 数据。最后一列 (10) 有一个数字：1、2、3、4 或 5。我有 5 行 jQuery 用于查找数字并为具有相应数字的单元格指定一个特定的类，这个工作正常（该单元格的不透明度为 0%，因为它并不意味着“显示”，但就我们而言，它可以正常工作）。

现在的问题是：第 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会有1,2,3,4,5这100行随机排列。

编辑：得到了它的外观图片：

$("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');

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;
}

<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>

【问题讨论】：

你能提供一个期望结果的样本吗？一方面，我可以告诉你 :nth-child(10) 似乎没有选择任何东西，所以那里显然有问题，但我不完全明白你想要完成什么。具有所需结果的图像可能会有所帮助！
:nth-child(10) 的不透明度为 0%，所以不会显示，给我几分钟，我会做一张图片
你的意思是这样的JsFiddle Demo 啊，我刚刚注意到你只希望它们在选定的列中。我相信你可以为它们添加一个类并以这种方式定位它们。
更改不透明度表明它按预期工作 - fiddle。
@AngelosChalaris 这是图片：imgur.com/gallery/0qp4Y

标签： javascript jquery html css

【解决方案1】：

我认为您正在寻找 .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/

【讨论】：

耶，谢谢！ :)

【解决方案2】：

可能是这样的？ (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;
    }
});

如果有很多行，并且除了添加的类之外，您不需要额外的东西，这可能是矫枉过正。 .siblings() 选择器（如this answer）就足够了。

【讨论】：

由 McVenco 让它工作，但也测试了你的，它工作得很好。他唯一的要容易一些，我不能接受 2 个遮阳篷，仍然非常感谢！！
有时我忘记了那里有简单的解决方案；）