Question

我必须根据一些业务逻辑更改表格行颜色。我的访问权限有限。我有PHP代码决定TD内容...从TD我必须改变当前的TR背景颜色。

jQuery可以提供帮助，因为它有很多遍历器和访问器。

我写的代码是

<script type="text/javascript">$(this).closest("td").css("border", "1px solid red");</script>

但无法访问当前的TD或TR

Answer 1

不要使用 this ，而是给元素一个id并使用jQuery获取它。在你的代码中，这指向没有。像：

<table><tr><td> <input id="myInput" type="text" /> </td></tr></table>

 //If you want to access the td
 $('#myInput').closest("td").css("border", "1px solid red");
 //If you want to access the tr
 $('#myInput').closest("tr").css("background", "red");

Answer 2

这里你可以使用parent（）函数。

如果你的元素是$（'＃el'），那么下面将给你最近的td和tr

$('#el').parents('td').first();
$('#el').parents('tr').first();

然后您可以应用如下操作

$('#el').parents('td').first().css("border", "1px solid red");
$('#el').parents('tr').first().css("border", "1px solid red");

Answer 3

您需要一些方法来定位TD内容或TD本身。如果内容是唯一的，您可以搜索关键字或词组。无论哪种方式，您都需要一个选择器 - $（this）只是在处理程序内部对jquery对象的引用。

修改

我考虑了一下，这是你可以尝试的东西。由于您只能访问内容，是否可以添加内容，例如 UPDATED ？如果是这样，那么您可以添加该关键字，并使用jQuery我们可以添加边框，背景并删除关键字，如下所示：

<table cellpadding="5px" cellspacing="5px" border="1px"> <tr><td>*UPDATED*Apple</td><td>Pie</td></tr> <tr><td>Orange</td><td>Crush</td></tr> </table>

-

var $updatedContent = $('td:contains("*UPDATED*")'); $updatedContent.closest('td').css('border', '1px solid red').closest('tr').css('background','green'); $updatedContent.text($updatedContent.text().replace('*UPDATED*', ''));

Answer 4

假设最糟糕的情况是，你有嵌套表而你无法改变当前的TD属性，而是以这种方式在其中打印一个空的跨度：

<table>
<tr>
<td>Content 1
    <table>
    <tr>
        <td>Content 2<span data-class="very_important" /></td>
    </tr>
    </table>
</td>
</tr>
</table>

将类添加到（第一个或最后一个）父TR，如下所示：

$(function() {
    $('span[data-class]').each(function(n) {
        var highlightClass = $(this).attr('data-class');
        $(this).parents('tr:first').addClass( highlightClass );
        $(this).remove(); /* Optional */
    });
});

现在你的TR已经上课了，你可以按自己喜欢的方式设计它（和它的孩子）。结果代码：

<table>
<tr>
    <td>Content 1
        <table>
        <tr class="very_important">
            <td>Content 2</td>
        </tr>
        </table>
    </td>
</tr>
</table>

需要访问当前的TR或TD

4 个答案: