javascript - 如何突出显示中继器中选定的行？

Question

我有一个中继器，我只希望当我选择或单击它的任何行时，它就会突出显示。我尝试了一些 javascript 代码，它使所选行突出显示，但在选择任何其他行时不会取消突出显示。我的代码是:-

<tr id="gh" style="cursor: pointer" onclick="Select(this);">

任何 javascript 和样式的代码是:-

<style type="text/css">
    .highlight
    {
        background-color: Red;
    }
    .selected
    {
        background-color: #ffdc87;
    }
</style>

<script type="text/javascript">
    function Select(obj) {
        obj.className = 'selected';
        var tbl = document.getElementById("Repaddressorbbl")
        var firstRow = tbl.getElementsByTagName("TR")[0];
        var tableRowId = tbl.rows[firstRow.getElementById("gh").parentNode.id];
        alert(tableRowId);
        var oldRow = tbl.rows[firstRow.getElementsByTagName("tr")[0].value];
        if (oldRow != null) {
            oldRow.className = '';
        }
        firstRow.getElementsByTagName("tr")[0].value = obj.rowIndex;

    }

</script>

我们可以简单地使用后台代码来完成此操作，但问题是它只能使用 jquery 或 javascript 来完成。

Answer 1

您可以使用与此类似的代码:

var INDEX = $(this).parent().children().index($(this));
$('#Repaddressorbbl tr:nth-child(' + INDEX + ')').addClass("highlight") 
                        .siblings()
                        .removeClass("highlight");  // remove css class from other rows

它获取 TR 的行号并添加 CSS 类，同时从所有其他 TR 中删除相同的类。