如何根据jQuery中的当前单元格值更改上一个表单元格的css样式和链接

我在SharePoint中有一个表结构，这意味着我无法控制已编译Web部件中呈现的HTML，因此我希望使用jQuery来帮助设计样式。我可以将Web部件包装在一个div中，以便在jQuery中为目标提供唯一的ID

对于任何值为0的表数据项，我希望其标签变灰，其链接不可单击

示例HTML是

<div id="uniqueID">
<table>
  <tr>
    <td><a href="url">Label 1</a></td>
    <td>12</td>
    <td><a href="url">Label 2</a></td>
    <td>0</td>
    <td><a href="url">Label 3</a></td>
    <td>2</td>
  </tr>
</table>
</div>

12
0
2.

虽然我知道我需要调查第二列的值，然后对前一列采取行动，但在JQuery中这样做的过程让我感到困惑

---

谢谢

您可以使用这段代码，利用查找以前的同级单元格，并从标签中删除链接：

$（'#uniqueID td'）。每个（函数（）{
如果（$（this）.text（）.trim（）=“0”）{
$（this.prev（）.find（'a'）.removeAttr（'href'）.css（{color:'grey'}）；
}
});

12
0
2.
您可以使用这段代码，利用查找以前的同级单元格，并从标签中删除链接：


$（'#uniqueID td'）。每个（函数（）{
如果（$（this）.text（）.trim（）=“0”）{
$（this.prev（）.find（'a'）.removeAttr（'href'）.css（{color:'grey'}）；
}
});

12
0
2.
您可以尝试以下方法：

$('#uniqueID>table td').each(function(){
    var self = $(this),
        hasLink = (self.children('a').length > 0);

  if (!hasLink && parseInt(self.text()) === 0){
    self.prev().addClass('grayedOut');
  }
});

和用于灰显状态的css类：

.grayedOut{
  color: #555;
  background-color: #aaa;
  pointer-events: none;
}

jsfiddle：

解释：遍历每个
td
元素并确定值是否等于零。只是为了以防万一-还要检查它是否包含链接。如果此条件已满，则将给定的
css
类应用于上一个
td
元素。除了着色之外，这个css类还应用了
指针事件：none这将使链接不可剪切
 您可以尝试以下方法：

$('#uniqueID>table td').each(function(){
    var self = $(this),
        hasLink = (self.children('a').length > 0);

  if (!hasLink && parseInt(self.text()) === 0){
    self.prev().addClass('grayedOut');
  }
});

和用于灰显状态的css类：

.grayedOut{
  color: #555;
  background-color: #aaa;
  pointer-events: none;
}

jsfiddle：

解释：遍历每个
td
元素并确定值是否等于零。只是为了以防万一-还要检查它是否包含链接。如果此条件已满，则将给定的
css
类应用于上一个
td
元素。除了着色之外，这个css类还应用了
指针事件：none这将使链接不可剪切
 你可以试试这个

<script>
$(document).ready(function() {
    $('td').each(function(){
        if($(this).has('a').length === 0){
            if($(this).html() == '0'){
                alert($(this).prev().html());
                $(this).prev().find('a').css('color','#000');
                $(this).prev().find('a').click(function(e){
                    e.preventDefault();
                });
            }
        }
    })
});
</script>


$（文档）.ready（函数（）{
$（'td'）。每个（函数（）{
if（$（this）.has（'a'）。长度==0）{
如果（$（this.html（）=='0'）{
警报（$（this.prev（）.html（））；
$（this.prev（）.find（'a'）.css（'color'，'#000'）；
$（this）.prev（）.find（'a'）。单击（函数（e）{
e、 预防默认值（）；
});
}
}
})
});
您可以试试这个

<script>
$(document).ready(function() {
    $('td').each(function(){
        if($(this).has('a').length === 0){
            if($(this).html() == '0'){
                alert($(this).prev().html());
                $(this).prev().find('a').css('color','#000');
                $(this).prev().find('a').click(function(e){
                    e.preventDefault();
                });
            }
        }
    })
});
</script>


$（文档）.ready（函数（）{
$（'td'）。每个（函数（）{
if（$（this）.has（'a'）。长度==0）{
如果（$（this.html（）=='0'）{
警报（$（this.prev（）.html（））；
$（this.prev（）.find（'a'）.css（'color'，'#000'）；
$（this）.prev（）.find（'a'）。单击（函数（e）{
e、 预防默认值（）；
});
}
}
})
});
您好，非常感谢。我选择在其他建议的基础上实现这一点，因为它提供了CSS类，该类还可以控制从CSS中单击链接的能力。谢谢您的提示@用户3779703不客气。删除
href
也是使链接不可剪切的有效选项我只是不知道在某些其他情况下是否需要再次使链接可剪切，所以我发现css选项“更安全”因为它不会删除url。您好，非常感谢，我选择在其他建议之上实现它，因为它提供了CSS类，它还控制从CSS中单击链接的能力-谢谢提示@用户3779703不客气。删除
href
也是使链接不可剪切的有效选项我只是不知道在某些其他情况下是否需要再次使链接可剪切，因此我发现css选项“更安全”，因为它不会删除url。