Javascript-форум - выбор соседнего элемента в одной строке таблицы

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

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - выбор соседнего элемента в одной строке таблицы (https://javascript.ru/forum/dom-window/49627-vybor-sosednego-ehlementa-v-odnojj-stroke-tablicy.html)

выбор соседнего элемента в одной строке таблицы

Всем привет.
Не могу реализовать следующее:

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

название | 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.

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

<!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>

Цитата:

Сообщение от Rise (Сообщение 326877)

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

предложенный вариант, скорее подходит для однострочной таблицы

Он работает при любом количестве строк... :D

<!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>

Но что использовать тебе, кроме тебя никто не решит...

Цитата:

Он работает при любом количестве строк...

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