Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.05.2014, 00:04
Интересующийся
Отправить личное сообщение для eFusion Посмотреть профиль Найти все сообщения от eFusion
 
Регистрация: 18.04.2014
Сообщений: 13

Сворачивание строк таблицы
Нужно свернуть строки таблицы, находящиеся ниже текущей по выбору <option> в <select>. Делаю так:

$(function () {
$tr = $('select').parents('tr');
$('select').change(function (){
$('tr').not($(this).prev()).not(this).slideUp() ;
});
$(':submit').click(function (event){
event.stopPropagation();
//event.preventDefault();
$('tr').slideDown() ;
})
});

сворачивает абсолютно все. Что делаю не так?
Ответить с цитированием
  #2 (permalink)  
Старый 13.05.2014, 00:36
Интересующийся
Отправить личное сообщение для eFusion Посмотреть профиль Найти все сообщения от eFusion
 
Регистрация: 18.04.2014
Сообщений: 13

На всякий случай html такой:

<form>
<table>
<tr>
<td>$row[0]</td>
<td>$row[1]</td>
<td>$row[2]</td>
<td>$row[3]</td>
<td>$row[4]</td>
</tr>
<tr>
<td><p>Текст</p></td>
<td><select class='span1' id='1' name='conn'>
          <option selected='selected'></option>
          <option>Текст</option>
          <option>Текст</option>
          <option>Текст</option> 
        </select></td>
<td><p>Текст</p></td>
        <td><select class='span1' id='2' name='tv'>
           <option selected='selected'></option>
           <option>Текст</option><option>Текст</option>
           <option>Текст</option></td>
<td><p>Текст</p></td>
        <td><select class='span1' id='3' name='inet'>
            <option selected='selected'></option>
            <option>Текст</option>
            <option>Текст</option>
            <option>Текст</option>
           </select>
           </td>
<td><button type='submit' id='continue' name='submit'>Готово</button>
</td>
</tr>
</form>
Ответить с цитированием
  #3 (permalink)  
Старый 13.05.2014, 01:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от eFusion
На всякий случай html такой:
теги когда добавите ?
Сообщение от eFusion
Нужно свернуть строки таблицы, находящиеся ниже текущей
какая строка текущая ? и где строки ниже ?


<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
   $(function ()
{
 $tr = $('tr');
 $('select').change(function (){
 var indx = $tr.index($(this).parents('tr'));
 $('tr').slice(indx+1).slideUp() ;

 });
 $(':submit').click(function (event){
 event.stopPropagation();
 //event.preventDefault();
 $('tr').slideDown() ;
 })
})
  </script>
</head>

<body>
<form>
<table>
<tr>
<td>$row[0]</td>
<td>$row[1]</td>
<td>$row[2]</td>
<td>$row[3]</td>
<td>$row[4]</td>
</tr>
<tr>
<td><p>Текст</p></td>
<td><select class='span1' id='1' name='conn'>
          <option selected='selected'></option>
          <option>Текст</option>
          <option>Текст</option>
          <option>Текст</option>
        </select></td>
<td><p>Текст</p></td>
        <td><select class='span1' id='2' name='tv'>
           <option selected='selected'></option>
           <option>Текст</option><option>Текст</option>
           <option>Текст</option></select></td>
<td><p>Текст</p></td>
        <td><select class='span1' id='3' name='inet'>
            <option selected='selected'></option>
            <option>Текст</option>
            <option>Текст</option>
            <option>Текст</option>
           </select>
           </td>
<td><button type='submit' id='continue' name='submit'>Готово</button>
</td>
</tr><tr>
<td>$row[0]</td>
<td>$row[1]</td>
<td>$row[2]</td>
<td>$row[3]</td>
<td>$row[4]</td>
</tr></table>
</form>

</body>

</html>
Ответить с цитированием
  #4 (permalink)  
Старый 13.05.2014, 14:00
Интересующийся
Отправить личное сообщение для eFusion Посмотреть профиль Найти все сообщения от eFusion
 
Регистрация: 18.04.2014
Сообщений: 13

Текущая строка та, в которой происходит change объекта <select> т.е. <option> поменялся - свернулось все что ниже этого куска:
<tr>
<td>$row[0]</td>
<td>$row[1]</td>
<td>$row[2]</td>
<td>$row[3]</td>
<td>$row[4]</td>
</tr>
<tr>
<td><p>Текст</p></td>
<td><select class='span1' id='1' name='conn'>
          <option selected='selected'></option>
          <option>Текст</option>
          <option>Текст</option>
          <option>Текст</option>
        </select></td>
<td><p>Текст</p></td>
        <td><select class='span1' id='2' name='tv'>
           <option selected='selected'></option>
           <option>Текст</option><option>Текст</option>
           <option>Текст</option></select></td>
<td><p>Текст</p></td>
        <td><select class='span1' id='3' name='inet'>
            <option selected='selected'></option>
            <option>Текст</option>
           <option>Текст</option>
            <option>Текст</option>
           </select>
      </td>

<td><button type='submit' id='continue' name='submit'>Готово</button>
</td>
</tr>


и если есть что-то выше этого куска (например еще один такой же блок) его тоже свернуть.
Ответить с цитированием
  #5 (permalink)  
Старый 13.05.2014, 14:03
Интересующийся
Отправить личное сообщение для eFusion Посмотреть профиль Найти все сообщения от eFusion
 
Регистрация: 18.04.2014
Сообщений: 13

Не могу понять - браузер в консоли мне возвращает:
Uncaught SyntaxError: Unexpected token =


хотя все знаки равно стоят где нужно.
Убираю код JS из скрипта(общего) ошибка пропадает
Ответить с цитированием
  #6 (permalink)  
Старый 13.05.2014, 14:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

eFusion,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
   $(function ()
{
 $tr = $('tr');
 $('select').change(function (){
 var indx = $tr.index($(this).parents('tr'));
 $('tr').slideUp().slice(indx-1,indx+1).slideDown() ;

 });
 $(':submit').click(function (event){
 event.stopPropagation();
 //event.preventDefault();
 $('tr').slideDown() ;
 })
})
  </script>
</head>

<body>
<form>
<table>
<tr>
<td>$row[0]</td>
<td>$row[1]</td>
<td>$row[2]</td>
<td>$row[3]</td>
<td>$row[4]</td>
</tr>
<tr>
<td><p>Текст</p></td>
<td><select class='span1' id='1' name='conn'>
          <option selected='selected'></option>
          <option>Текст</option>
          <option>Текст</option>
          <option>Текст</option>
        </select></td>
<td><p>Текст</p></td>
        <td><select class='span1' id='2' name='tv'>
           <option selected='selected'></option>
           <option>Текст</option><option>Текст</option>
           <option>Текст</option></select></td>
<td><p>Текст</p></td>
        <td><select class='span1' id='3' name='inet'>
            <option selected='selected'></option>
            <option>Текст</option>
           <option>Текст</option>
            <option>Текст</option>
           </select>
      </td>

<td><button type='submit' id='continue' name='submit'>Готово</button>
</td>
</tr>
<tr>
<td>$row[0]</td>
<td>$row[1]</td>
<td>$row[2]</td>
<td>$row[3]</td>
<td>$row[4]</td>
</tr>
<tr>
<td><p>Текст</p></td>
<td><select class='span1' id='1' name='conn'>
          <option selected='selected'></option>
          <option>Текст</option>
          <option>Текст</option>
          <option>Текст</option>
        </select></td>
<td><p>Текст</p></td>
        <td><select class='span1' id='2' name='tv'>
           <option selected='selected'></option>
           <option>Текст</option><option>Текст</option>
           <option>Текст</option></select></td>
<td><p>Текст</p></td>
        <td><select class='span1' id='3' name='inet'>
            <option selected='selected'></option>
            <option>Текст</option>
           <option>Текст</option>
            <option>Текст</option>
           </select>
      </td>

<td><button type='submit' id='continue' name='submit'>Готово</button>
</td>
</tr>
</table>
</form>

</body>

</html><!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
   $(function ()
{
 $tr = $('tr');
 $('select').change(function (){
 var indx = $tr.index($(this).parents('tr'));
 $('tr').slideUp().slice(indx-1,indx+1).slideDown() ;

 });
 $(':submit').click(function (event){
 event.stopPropagation();
 //event.preventDefault();
 $('tr').slideDown() ;
 })
})
  </script>
</head>

<body>
<form>
<table>
<tr>
<td>$row[0]</td>
<td>$row[1]</td>
<td>$row[2]</td>
<td>$row[3]</td>
<td>$row[4]</td>
</tr>
<tr>
<td><p>Текст</p></td>
<td><select class='span1' id='1' name='conn'>
          <option selected='selected'></option>
          <option>Текст</option>
          <option>Текст</option>
          <option>Текст</option>
        </select></td>
<td><p>Текст</p></td>
        <td><select class='span1' id='2' name='tv'>
           <option selected='selected'></option>
           <option>Текст</option><option>Текст</option>
           <option>Текст</option></select></td>
<td><p>Текст</p></td>
        <td><select class='span1' id='3' name='inet'>
            <option selected='selected'></option>
            <option>Текст</option>
           <option>Текст</option>
            <option>Текст</option>
           </select>
      </td>

<td><button type='submit' id='continue' name='submit'>Готово</button>
</td>
</tr>
<tr>
<td>$row[0]</td>
<td>$row[1]</td>
<td>$row[2]</td>
<td>$row[3]</td>
<td>$row[4]</td>
</tr>
<tr>
<td><p>Текст</p></td>
<td><select class='span1' id='1' name='conn'>
          <option selected='selected'></option>
          <option>Текст</option>
          <option>Текст</option>
          <option>Текст</option>
        </select></td>
<td><p>Текст</p></td>
        <td><select class='span1' id='2' name='tv'>
           <option selected='selected'></option>
           <option>Текст</option><option>Текст</option>
           <option>Текст</option></select></td>
<td><p>Текст</p></td>
        <td><select class='span1' id='3' name='inet'>
            <option selected='selected'></option>
            <option>Текст</option>
           <option>Текст</option>
            <option>Текст</option>
           </select>
      </td>

<td><button type='submit' id='continue' name='submit'>Готово</button>
</td>
</tr>
</table>
</form>

</body>

</html>
Ответить с цитированием
  #7 (permalink)  
Старый 13.05.2014, 15:08
Интересующийся
Отправить личное сообщение для eFusion Посмотреть профиль Найти все сообщения от eFusion
 
Регистрация: 18.04.2014
Сообщений: 13

В очередной раз - огромное спасибо!!!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамическое удаление строк таблицы Tankist Events/DOM/Window 16 03.07.2013 16:42
Изменение окраски строк таблицы, исходя из данных? Space-06 Events/DOM/Window 4 14.02.2012 21:32
Вопрос по each() и перебору строк таблицы battrack jQuery 1 09.02.2012 14:30
Перемещение строк таблицы в Firefox barcelona jQuery 17 23.02.2009 15:41
Автоматическая подсветка строк таблицы mihha Элементы интерфейса 5 01.02.2009 01:28