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

Question

我在SharePoint中有一个表结构，这意味着我无法控制已编译的webpart中呈现的HTML，所以我想使用jQuery来协助样式化。我可以将webpart包装在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>

虽然我知道我需要研究每一个列的值，然后对前一列进行操作，但是在JQuery中执行此操作的过程让我很难过。

由于

Answer 1

您可以使用这段代码，使用prev()查找上一个兄弟单元格，使用removeAttr()删除标签中的链接：

＆＃13;

＆＃13;

export default Ember.Route.extend({
  model() {
    // A better way to do this would be to `findRecord` with an id
    return this.store.findAll('bank-account').then(bankAccounts => {
      let bankAccount = bankAccounts.get('firstObject');
      // Properties are usually camel cased this seems weird
      // Can you add your model definition?
      if (bankAccount.get('is_connected')) {
        bankAccount = this.store.createRecord('bank-account', { account_label: 'new' });
      }
    });

    return Ember.RSVP.hash({
      appState: this.get('appStates').currentAppState(),
      // A better way to do this would be to `findRecord` with an id
      user: this.store.findAll('user').thenGetFirst(),
      bankAccount: bankAccount,
    });
  },
});

＆＃13;

$('#uniqueID td').each(function () {
    if ($(this).text().trim() == "0") {
        $(this).prev().find('a').removeAttr('href').css({color: 'grey'});
    }
});

＆＃13;

＆＃13;

＆＃13;

链接是安全的

没有必要添加检查是否确实存在先前的单元格或链接，因为在这种情况下jQuery将不执行任何操作（在这种情况下jQuery对象是空数组）。

删除<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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>属性

在此解决方案中，只需删除href属性即可使链接无法点击，因为显然它没有用处，最好摆脱它。

即使在禁用某些鼠标指针事件时也意识到而不删除href属性 - 仍然启用了URL，用户仍然可以通过以下几种方法跟踪它： / p>

• 链接可以获得焦点（例如通过tab键），一旦有焦点，有几种方法可以激活链接：

  • 使用回车键;
  • 使用上下文菜单键（通常在右侧Ctrl键旁边）：可以通过该弹出菜单打开链接;
  • 其他输入设备（例如电视控制）存在多种方式

• 浏览器插件可以帮助用户以某种方式使用链接;

• 加载页面的脚本可能也以某种方式使用该链接....

这些是想到的方法，但可能会有更多。

因为链接实际存在，对于那些使用screen readers）或其他辅助工具的人来说可能会产生误导。

另见this question。

忽略空格

trim（）调用确保即使周围有空白区域也可以识别零点。

Answer 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：https://jsfiddle.net/y6fb8Lb6/

解释：遍历每个td元素并确定该值是否等于零。仅用于案例 - 还要检查它是否包含链接。如果此条件已满，请将给定的css类应用于上一个td元素。这个css类的着色也适用于pointer-events: none;，这将使链接不可复制。

Answer 3

你可以试试这个

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