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

我有一个中继器，我只想当我选择或点击它的任何一行时，它会高亮显示。我尝试了一些javascript代码，使选中的行高亮显示，但在选择任何其他行时不会取消高亮显示。我的代码是：-

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

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

任何javascript和样式的代码都是：-

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

<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来完成。

您可以使用类似于以下内容的代码：

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中删除相同的类。

jQuery更新：

$(document).ready(function() {
   $("tr").click(function() {
      $(this).addClass("highlight").siblings().removeClass("highlight");
   }
}

原始答复：

如果我理解正确，所有表行的定义如下：

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

---

我不明白你想用firstRow.getElementsByTagNametr做什么。有嵌套表吗？

我添加了一个函数，用于选择具有特定类名的元素，以便可以轻松地在dom中搜索具有该类的元素

onload=function(){
    if (document.getElementsByClassName == undefined) {
        document.getElementsByClassName = function(className)
        {
            var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
            var allElements = document.getElementsByTagName("*");
            var results = [];

            var element;
            for (var i = 0; (element = allElements[i]) != null; i++) {
                var elementClass = element.className;
                if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
                    results.push(element);
            }

            return results;
        }
    }
}
function Select(obj) {
    var oldRow = document.getElementsByClassName('selected');
    if(oldRow.length > 0)
        oldRow[0].className = '';
    obj.className = 'selected';
}

---

你为什么需要索引？你不能说$this.addClasshighlight.sides.removeclasshhighlight；如果这是tr，则可以通过说出this.rowIndex直接获取索引，而无需jQuery。顺便说一句，这个问题没有用jQuery标记。你是对的，你真的不需要索引。尽管问题没有相应地标记，但这确实为手头的问题提供了一个简单的解决方案，因此OP可能想要使用它，或者不知道jQuery的功能。这似乎起到了作用：问题已经更新为包含jQuery。我希望你不介意，但是我已经相应地更新了我的答案。实际上有很多表是有条件可见的。先生，你的代码没有在选择我单击的每一行时工作。但是不删除类。好的，对不起，但是也许你可以在你的问题中明确指出有多个表。这些表是嵌套的吗？请再显示一些html。您是否希望每个表都有自己的、独立的突出显示？如果是这样，我的jQuery版本应该已经做到了。如果您只希望在一个表中突出显示，那么将tr选择器更改为表tr的id_。对于非jQuery版本，在我了解您希望多个表如何工作之前，我不会建议对其进行更改。