如何在单击单元格中的链接值时动态更改表行背景色

how to dynamically change a table row background color when a link value within its cell changes when clicked

本文关键字：动态 背景色 链接 单击 单元格      更新时间：2023-09-26

我已经研究了好几天了，似乎无法实现收支平衡。我有一个表，它在其中一个单元格（最后一个单元格）中展开了一系列链接。现在，当单击时，最后一个链接中的文本值会发生变化（用jsf-ajax实现），以反映它所在行的状态，从"suspend"变为"resume"，反之亦然。我用jQuery改变了背景每当加载文档并且文本链接显示"简历"时，行的颜色。请参阅下面我如何实现这个

var defaultval;
$(" table tbody tr td:nth-child(7)").each(function() {
    defaultval = $(this).find("a:nth-child(4)").html();
    if (defaultval == "resume") {
        $(this).parents("tr").addClass("suspended")
    }
});​

现在，我希望每当点击链接时，这一行的背景颜色都会改变，并且它的文本值会变为"简历"，所以我在下面写了JQuery代码

$("table tbody tr td:nth-child(7) ").click(function() {
    if ($(this).find("a:nth-child(4)").html() !== "resume") {
        $(this).parents("tr").addClass("suspended");
    }
    else {
        $(this).parents("tr").removeClass("suspended");
    }
});​

当我点击链接时，它似乎起了作用。但问题是，当细胞本身和细胞内的其他链接由于上面的实现，链接的文本不会改变。当我这样做的时候：

$("table tbody tr td:nth-child(7) a:nth-child(4)").click(function() {
    if ($(this).html() !== "resume") {
        $(this).parents("tr").addClass("suspended");
    }else {
        $(this).parents("tr").removeClass("suspended");
    }
});​

它会更改一次，不会随着进一步的单击而更改回来。现在，我想将此效果限制为仅当单击此链接时。感谢您的回复。

听起来，更改链接中文本的代码实际上完全取代了链接（a标记和所有）。。。这意味着您删除了添加的click事件侦听器。你有两个选择：

选项一

不要完全替换链接，只需更改文本，它就是href（如果需要）。如果不删除/替换原始的a标记，click侦听器将保留在原位，并在第一次单击后捕获更多的单击。以下内容将允许您只更改a中需要的部分。

$('table tbody tr td:nth-child(7) a:nth-child(4)')
    .attr('href', 'http://stackoverflow.com')
    .html('My new link text goes here');

选项二

将事件侦听器更改为使用.live或.on（取决于您使用的jQuery版本）。

$("table tbody tr td:nth-child(7) a:nth-child(4)").live('click', function() {
  if ($(this).html() !== "resume") {
    $(this).parents("tr").addClass("suspended");
  }else {
    $(this).parents("tr").removeClass("suspended");
  }
});​

上面所做的并不是将监听器实际绑定到元素，而是将其绑定到文档，当文档上触发点击事件时，它会将事件冒泡，直到jQuery选择器匹配到接收到点击的元素。这意味着您可以随心所欲地修改链接。。。你甚至可以添加更多的a标签。。。只要它们与您使用的jQuery选择器匹配，它们仍然可以工作。

进一步说明

作为额外的建议，我想对你正在做的事情做两件事。

首先，我不会使用：nth-child（）来定位元素，而是向它们添加类并以这种方式定位它们。如果您的表更改了单元格或行的维度，这将更加经得起未来的考验。

其次，当在JavaScript中引用$(this)时，最好执行以下操作：

$("table tbody tr td.target-cell a.target-link").live('click', function() {
  var self = $(this);
  if (self.html() !== "resume") {
    self.parents("tr").addClass("suspended");
  }else {
    self.parents("tr").removeClass("suspended");
  }
});​

通过创建一个变量来存储$(this)，您可以大量地选择代码，而不是让jQuery每次都计算$(this)。

相关文章：