Блог

У меня есть repeater, и я просто хочу, чтобы при выборе или щелчке по любой его строке она выделялась. Я попробовал некоторый код 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.

Вы можете использовать код, подобный этому:

 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.

я добавил функцию для выбора элементов с определенным classname, чтобы вы могли легко искать в 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 amp;amp; elementClass.indexOf(className) != -1 amp;amp; 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';
}
  

Обновление для 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") материалом. У вас есть вложенные таблицы?