Question

我有一个转发器，我只是想要当我选择或点击它的任何一行然后突出显示。我曾尝试过一些javascript代码，它会使所选行突出显示，但在选择任何其他行时不会突出显示。我的代码是： -

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

任何javascript＆style和代码的代码是： -

<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的rownumber并添加一个CSS类，同时从所有其他TR中删除相同的类。

Answer 2

jQuery更新：

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

原始答案：

如果我理解正确，那么所有的表行都是这样定义的：

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

你想在最近点击的行上设置一个类，使其看起来被选中，同时从之前点击/选中的行中清除所述类？

如果是这样，你的函数的简化版本应该这样做：

var selectedRow = null;

function Select(obj) {
   if (obj != selectedRow) {
      if (selectedRow != null) {
         selectedRow.className = '';
      }
      obj.className = 'selected';
      selectedRow = obj;
   }
}

我不明白你要对firstRow.getElementsByTagName("tr")的东西做什么。你有嵌套表吗？

Answer 3

我添加了一个函数来选择具有特定类名的元素，这样您就可以轻松地在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';
}

如何突出显示转发器中选定的行？

3 个答案: