Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.08.2014, 16:35
Новичок на форуме
Отправить личное сообщение для malivadim Посмотреть профиль Найти все сообщения от malivadim
 
Регистрация: 21.08.2014
Сообщений: 6

выбор соседнего элемента в одной строке таблицы
Всем привет.
Не могу реализовать следующее:

есть таблица вида:

название | id | сортировка

заполняется динамически на php из БД

сортировка - это поле input text

Задача:
При потере фокуса поля сортировка взять новое значение этого поля, а также выбрать значение поля id на этой строке таблицы.
Т.е. я ajax'сом хочу отправить новое значение поля сортировки и id категории, а дальше изменить его в БД.

моя форма:
<form action="#" method="get">
<table>
начало цикла foreach
<tr>
<td><a href="#"><?=$row['cat_name']?></a></td>  
<td><input class="cat_id" value="<?=$row['id']?>"/></td>
<td><input class="sort" name="sort" type="text" name="order_cat" size="1" value="<?=$row['order_cat']?>"/></td>
</tr>
конец цикла foreach
</table>
</form>


на jquery:
$("form").each(function(){
       
      $(".sort").change(function(){
        
        var order_cat = $(this).val();
        var cat_id = $('.cat_id').val();
        });  
    });

циклом проверяю какое поле изменилось и записываю его значение в переменную.

естественно, код выше не работает, а записывает в переменную cat_id id - шник с первой строки таблицы.
А как записать во вторую переменную значение поля с классом cat_id, который находиться на одной строке таблицы, тобишь, соответствующий?
И вообще правилен ли подход?
сразу оговорюсь только начал изучать jquery.

Последний раз редактировалось malivadim, 22.08.2014 в 08:33.
Ответить с цитированием
  #2 (permalink)  
Старый 21.08.2014, 16:52
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function (){
	$('form .sort').change(function (){
		var id=$(this).parent().prev().find('.cat_id').val();
		alert(id);
	});
});
</script>
</head>
<body>
<form action="#" method="get">
	<table>
		<tr>
			<td><a href="#">cat_name</a></td>  
			<td><input class="cat_id" value="id"/></td>
			<td><input class="sort" name="sort" type="text" name="order_cat" size="1" value=""/></td>
		</tr>
	</table>
</form>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 22.08.2014, 08:21
Новичок на форуме
Отправить личное сообщение для malivadim Посмотреть профиль Найти все сообщения от malivadim
 
Регистрация: 21.08.2014
Сообщений: 6

Сообщение от Rise Посмотреть сообщение
malivadim, зачем тэг form? id тоже будет меняться что-ли, зачем там input? зачем два name у input sort? масса вопросов!
Это будет страница админки, на самом деле, там еще много столбцов, но они сути дела не меняют, приложу картинку для наглядности:



На самом деле, полю id input не нужен, он будет просто как текст.

Допустим, мне надо поменять сортировку у категории, изменил, а она ajax'сом полетела в БД.
Изменил "Родителя" а она опять ajax'сом в БД. Все быстро и удобно. А для этого мне нужно отправить на сервер 2 параметра:
1. id - категории
2. новое значения изменяемого поля.

Вообще я потом все характеристики категории хочу так редактировать, для каждого столбца(поля) написав соотв функцию.

Первое что в голову пришло, видите на картинке.

По поводу 2-х name, это я уже намудрил после многочисленных экспериментов.

Вообще, вот полный код таблицы:
<table class="adm_table_cat">
<tr>
	<td class="" width="200">Название</td>
	<td width="30px">id</td>
    <td width="75px">Родитель</td>
	<td width="75px">Уровень</td>
	<td  width="85px">Сортировка</td>
	<td width="65px">Статус</td>
    <td width="170px">Иконка</td>
</tr>
<form action="#" method="get">
<?php foreach(массив категорий):?>
<tr>
    <td><a href="#">cat_name</a></td>
	<td><p class="cat_id">id</p></td>
	<td><input type="text" name="parent" size="1" value="parent"/></td>
	<td><select name="level_cat">
    <option <?php if($row['level_cat']== '1') echo 'selected="selected"';?>>1</option>
    <option <?php if(level_cat== '2') echo 'selected="selected"';?>>2</option>
    <option <?php if('level_cat== '3') echo 'selected="selected"';?>>3</option>
    <option <?php if(level_cat== '4') echo 'selected="selected"';?>>4</option>
    </select></td>
	<td><input class="sort" name="sort" type="text"  size="1" value="order_cat"/></td>
	<td><input type="checkbox" name="activ" <?php if(active == '1') echo 'checked="checked"';?>/></td>
    <td><input type="text" name="icon_url" size="22" value="icon_url"/></td>
</tr>
<?php endforeach;?>
</form>
</table>

Я опустил многие php элементы. и id поместил в тэг p, скорее так.
Соответственно, id у категории естественно будет меняться, как и все остальные значения.

ksa,спасибо, но предложенный вариант, скорее подходит для однострочной таблицы, в моем же случае, как видите нужен цикл. Но я его попробовал, у меня с многострочной таблицей не работает.
$("form").each(function(){
      $(".sort").change(function(){ 
        var order_cat = $(this).val();
        var cat_id = $('.cat_id').val();
        }); 
    });

так у меня получается взять новое значение в переменную order_cat, но cat_id всегда содержит id первой строки (категории). оно и понятно, я не прохожусь по нему циклом.
Как вариант думал сделать так:

классу абзаца id прибавить в цикле на php префикс, например: cat_id_1, соответственно следующие cat_id_2, cat_id_3 и т.д.
классу sort тоже самое: sort_1, sort_2, sort_3 и т.д.

После чего проходиться циклом each по классу .sort_префикс (но не знаю как)
Извлечь этот префикс и в переменную cat_id положить значение поля с классом cat_id_(приклеенный префикс).

Правилен ли такой подход? если да. то подскажите как это сделать.
Или это можно осуществить только с помощью селекторов?

Последний раз редактировалось malivadim, 22.08.2014 в 08:59.
Ответить с цитированием
  #4 (permalink)  
Старый 22.08.2014, 08:38
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

Сообщение от malivadim
предложенный вариант, скорее подходит для однострочной таблицы
Он работает при любом количестве строк...

<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function (){
	$('form .sort').change(function (){
		var id=$(this).parent().prev().find('.cat_id').val();
		alert(id);
	});
});
</script>
</head>
<body>
<form action="#" method="get">
	<table>
		<tr>
			<td><a href="#">cat_name</a></td>  
			<td><input class="cat_id" value="id1"/></td>
			<td><input class="sort" name="sort" type="text" name="order_cat" size="1" value=""/></td>
		</tr>
		<tr>
			<td><a href="#">cat_name</a></td>  
			<td><input class="cat_id" value="id2"/></td>
			<td><input class="sort" name="sort" type="text" name="order_cat" size="1" value=""/></td>
		</tr>
		<tr>
			<td><a href="#">cat_name</a></td>  
			<td><input class="cat_id" value="id3"/></td>
			<td><input class="sort" name="sort" type="text" name="order_cat" size="1" value=""/></td>
		</tr>
	</table>
</form>
</body>
</html>

Но что использовать тебе, кроме тебя никто не решит...
Ответить с цитированием
  #5 (permalink)  
Старый 22.08.2014, 09:49
Новичок на форуме
Отправить личное сообщение для malivadim Посмотреть профиль Найти все сообщения от malivadim
 
Регистрация: 21.08.2014
Сообщений: 6

Цитата:
Он работает при любом количестве строк...
Действительно работает! НО!
Т.к. функция prev() находит элементы находящиеся непосредственно перед, а у меня есть еще столбцы, то я заменил ее на prevAll() и все заработало!
Спасибо огромное!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
сэмулировать выбор первого элемента select evgeniy123 jQuery 2 05.02.2014 02:37
Выбор из таблицы HOmevl Общие вопросы Javascript 4 15.09.2011 01:40
Получение значения соседнего элемента Max Tretyakov Events/DOM/Window 2 27.06.2011 22:01
Несколько созданных элементов располагаются в одной строке. Как этого избежать? Hold Events/DOM/Window 1 21.01.2011 23:52
Автоматический выбор элемента Luberg Events/DOM/Window 3 25.02.2010 15:59