Javascript-форум - plugin selectable

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - plugin selectable (https://javascript.ru/forum/jquery/40331-plugin-selectable.html)

plugin selectable

Добрый день.
Мммм... столкнулся с проблемой по плагину selectable.
В основном в интернете во всех примерах его применяют к <ul><li> . А можно ли его применять к строкам динамической таблице выгруженной из БД? Если нет то как сделать следующее: при наведении курсора на строку динамической таблицы чтоб эта строка подсвечивалась. А при клике она (строка) выделялась? если можно сделать это плагином то подскажите пожалуйста как? Я делал так:

<style>
	
	#selectable .ui-selecting { background: #FECA40; }
	#selectable .ui-selected { background: #F39814; color: white; }
	#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
	#selectable tr { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
	</style>
	<script>
	$(function() {
		$( "#selectable" ).selectable();
	});
	</script>

а сама таблица так:

<table align="center" class="table1" id="selectable" >
  <thead>
  <tr>
    <th>col1</th>
    <th>col2</th>
   
  </tr>
  </thead>
  <tbody >
    
  <?php do { ?>
  
   <tr>
      
      <td><?php echo $row_Recordset1['col1']; ?></td>
      <td><?php echo $row_Recordset1['col2']; ?></td>
      
    </tr>
    <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
   </tbody>
</table>

Но при этом выделяется одна ячейка, а не строка и то через раз. Что делать?

Цитата:

Сообщение от lemuriec

Но при этом выделяется одна ячейка, а не строка и то через раз. Что делать?

а подумать -- что для ваших tr будет тоже самое чем для li является ul.

в тег tbody вставлял id="selectable" - не помогает

Цитата:

Сообщение от рони (Сообщение 265396)

а подумать -- что для ваших tr будет тоже самое чем для li является ul.

в тег tbody вставлял id="selectable" - не помогает

Цитата:

Сообщение от lemuriec

в тег tbody вставлял id="selectable" - не помогает

а подумать?

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>selectable demo</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js">
</script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js">
</script>
  <style>
    #selectable .ui-selecting { background: #FECA40; }
    #selectable .ui-selected { background: #F39814; color: white; }
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #selectable tr { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
    #selectable tr:hover {  cursor: pointer; background-color: #FFB861;}
  </style>
  <script>
  $(function() {
        $( "#selectable tbody" ).selectable();
    });
  </script>
</head>

<body>
  <table align="center" class="table1" id="selectable">
    <thead>
      <tr>
        <th>col1</th>

        <th>col2</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>test</td>

        <td>test</td>
      </tr>

      <tr>
        <td>test</td>

        <td>test</td>
      </tr>

      <tr>
        <td>test</td>

        <td>test</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Спасибо за помощь. вопрос закрыт)