Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Выделение только одного <tr> в таблице (https://javascript.ru/forum/dom-window/34576-vydelenie-tolko-odnogo-tr-v-tablice.html)

vitek25 10.01.2013 19:49

Выделение только одного <tr> в таблице
 
Всем привет! Прошу прощения может за глупый вопрос, но что то в голову ничего не лезет, если уже была где-то такая тема ткните носом, а то что то даже не могу определится с поисковым запросом.


Необходимо выделить одну строку в таблице по клику на ней.

Сейчас выделяется несколько строк. Например нажал на первую - выделилась первая, нажал на вторую - выделилась вторая.

А мне надо так

нажал на первую - выделилась

нажал на вторую - первая стала не выделенной, а вторая выделилась.

Вот что есть из кода

function shHide(divId)  
    { 
        var div = document.getElementById(divId); 
	    if (div.className  == "tab_act")  
        { 
			
            div.className = ""; 
        } 
        else  
        { 
            div.className = "tab_act"; 
			
        } 
    }


строки формируются в цикле

echo  '<tr id="view_table'.$i.'" onClick="shHide(\'view_table'.$i.'\')">';

рони 10.01.2013 21:24

vitek25,
Вариант...сохранять данные предыдущего нажатия
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
tr.tab_act  td{
  background: #FFFF33
}
</style>
  <title></title>
</head>
<body>
<table width="300" height="100" border="1">
  <tr onclick="shHide(this)" >
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr onclick="shHide(this)">
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr onclick="shHide(this)">
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr onclick="shHide(this)">
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

<script type="text/javascript">
shHide = function (c) {
    var a;
    return function (b) {
        a != b ? (b.className = c, a && (a.className = ""), a = b) : a = b.className = ""
    }
}("tab_act");
</script>
</body>
</html>

Deff 10.01.2013 21:28

Цитата:

Сообщение от vitek25
нажал на вторую - первая стала не выделенной, а вторая выделилась

Cтандартный Вариант: - по клику - удаляем класс "Асtive" со всех возможных элементов текущих кликов
и добавлям данный класс (Асtive) к текущему кликанутому
Cкрытие - разворачивание-выделение устанавливаем в css по классу
=======================
(*Хотя поглядел:рони, чуть улучшил - удалил перебор снятия класса с предыдущего элемента
в принципе можно было и без ID - запихивать в old_divId = this

vitek25 11.01.2013 11:09

сделал как Рони написал, все отлично работает. Спасибо большое


Часовой пояс GMT +3, время: 17:22.