0

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

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

我正在写的代码是

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

但无法访问当前的 TD 或 TR

4

4 回答 4

2

不要使用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");
于 2012-12-10T11:29:41.743 回答
0

在这里你可以使用 parents() 功能。

如果你的元素是 $('#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");
于 2012-12-10T11:30:02.290 回答
0

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

编辑

我想了更多，这里有一些你可以尝试的东西。由于您只能访问内容，您可以向其中添加一些内容，例如UPDATED吗？如果是这样，那么您可以添加该关键字，并且使用 jQuery，我们可以添加边框、背景和删除关键字，如下所示：

​&lt;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*', ''));

​</p>

于 2012-12-10T11:30:23.850 回答
0

假设在最坏的情况下，您有嵌套表并且无法更改当前 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>
于 2012-12-10T11:56:53.480 回答