Применение одного скрипта к разным строкам <table>
 

Здравствуйте.
В силу знаний не могу пока решить следующую задачу.
Есть обычная таблица, которая заполняется значениями из БД. Каждая строка - товар. В последней ячейке строк есть кнопка "в корзину". При нажатии на странице без перезагрузки должны появляться позиции (по подобию строки из таблицы). Я как новичок присваивал каждой ячейке индивидуальный #id через цикл и тогда я мог брать значения ячеек через $('#id').val() или .text() , но мне пришлось на каждую кнопку вешать отдельный скрипт.
Вопрос. Можно ли использовать один скрипт так, чтобы он брал данные только из той строки в какой нажата кнопка? Присматриваюсь к .closest()
Уважаемые, наведите на нужный путь.
Спасибо.

Вот каждая строка и должна иметь ID уникальный, но взятый не итерацией из цикла, а равным ID товара, а не ячейки содержать ID. Насчет одним скриптом - можно, и лучше делегировать обработку родителю. А вообще надо код показывать, чтобы была возможность ответить адекватно.

<table>
    <tr id="id1">
        <td>Товар 1</td>
        <td>диаметр</td>
             <td>
            <select id='sel'>
                 <option selected disabled value="0">выберите размер</option>
                <option value=0.7>350x2000</option>
                <option value=0.76>380x2000</option>
            </select>
        </td>
        <td>60</td>
        <td><button id='but1'>Кнопка</button></td>
    </tr>
<tr id="id2">
        <td>Товар 2</td>
        <td>диаметр</td>
             <td>
            <select id='sel'>
                 <option selected disabled value="0">выберите размер</option>
                <option value=0.7>350x2000</option>
                <option value=0.76>380x2000</option>
            </select>
        </td>
        <td>60</td>
        <td><button id='but2'>Кнопка</button></td>
    </tr>
</table>

$('#but').click(function (){
           if($('#sel').val()>0){   // если выбран элемент SELECT
                var res=$("#id1").html();  // присваиваем переменной содержимое строки <TR>
                $("#div").html(res);  // выводим содержимое sel в какой-то <div>
           }
           else {
                $("#sel").css('background-color','#FF0D0D');  // подсветка красным <select> если элемент не выбран
          
           }
           $("#sel").change();    
    });

Полностью код не стал уж выкладывать)) Не показывать же грязное белье всем) Это общая суть того как я копирую содержимое первой строки в какой-то заданный <div>
Можно как-то отвязаться от конкретных #id ? Что-то мелькало на просторах интернета с применением $(this) и .closest(). Суть вроде бы такая, что где произошло событие click скрипт работает в пределах этого элемента, например <tr> т.е. одной строки.
Просто не знаю куда поиск направить.

tr id="id1" - это что такие идентификаторы и имеют товары?

Зачем, если стоит задача работать с товарами и добавлять их в корзину? Вы сам механизм корзина представляете себе и что вообще в нее добавлять выгодно?

Идентификаторы я тут привел для примера просто, а так там 1, 2, 3 в БД id автоматом присваивается.
У меня задумка с корзиной такая:
без перезагрузки страницы я вывожу выбранные позиции где-то на странице, id в сессию, а основную корзину я сделаю уже на PHP отдельной страницей с выборкой из БД.
Я вот не пойму как один скрипт привязать к конкретной кнопке и строке с этой кнопкой.

Корзина по сути и есть либо сессия, либо в базе, и управлять этим будет в лбом случае серверный язык, РНР так РНР. Может быть и на куках. А идентификаторы товаров в этой корзине будут ключами массива, под которыми помещают другие важные характеристики товара, дабы не дергать базу постоянно, так как корзина обычно имеет еще и краткое представление отображаемое постоянно.

Если можно не только добавить товар в корзину, но и выбрать его количество, то ключевым элементом в этом случае будет не ячейка/строка таблицы, а поле формы, которое помимо ID товара может хранить и его цену и прочие параметры.

Если же нет и добавляется по одному, и не зависимо от того что щелкают в строке таблицы, то ID должен содержать TR, иначе ячейка. При этом не обязательно идентификатор держать в атрибуте id, есть и data-name.

$('селектор_таблицы').on('click', 'селектор_строк/ячеек', function() {
//отправляем id товара серверу
})

Хотя добавление в корзину, это обычно кнопка.

Немного говорим о разном. Если известны все селекторы, то это все просто. Если скрипт один, то в нем же не пропишешь все селекторы? Он как-то должен определять в какой строке нажата кнопка. Я вот еще порылся на просторах и примерно такой скрипт вырисовывается

function addtocart() {
		$('#addtocart').click(function(){  //addtocart - селектор всех кнопок
			var res = $(this).text(); // к примеру берем текст самой кнопки
			alert(res);
		});
	}
	addtocart();

Скрипт работает только для первой строки, а как бы сварганить так, чтобы для каждой строки?
Я хочу реальзовать как бы не по сути корзину таким способом, а просто внешний облик. При нажатии кнопки между, например, header и content появлялся див с позициями, которые выбрал пользователь. Когда нажимает оформить, то уже переходит на страницу корзины где властвует PHP)))
Параллельно с этим, кстати, можно ajax'ом отправить id

'#addtocart' - не может быть селектором всех кнопок, ибо id на странице должно быть уникальным, в противном случае скрипт найдет первый из них, а на остальные ему будет наплевать.

РНР вообще не властен на странице - сервер выдал запрашиваемое, а дальше ему ровным счетом наплевать.

Я вам показал как описывается делегирование обработчика родителю. Кнопки ли это, ячейки ли таблицы, дело десятое, а в этом обработчике делайте что хотите.

Может тогда поступить проще и при выводе таблицы присваивать кнопке селектор равный id товара?

Я не понимаю ваших терзаний. Не важно как как установить обработчики на источник этой операции, ведь в любом случае это была бы одна функция.

Конечно кнопке, и она вообще может иметь невалидный id, то есть id="3245", но лучше data-prop="здесь в формате lson поместить о товаре все что потребуется, а можно только идентификатор". Все, какие терзания, если только добавить в корзину. Или же за вопросом "одна функция", это добавление товара в корзину, еще что-то показать, еще чего либо... ?

Вот тут я взял пример http://jsfiddle.net/cJ8MV/9/
Селекторы вроде бы одинаковые.

В примере селектор по имени класса, и оно может быть одинаковым у множества элементов.

Вы думаете по сути это отличается от того что я написал? Я вам показал делегирование обработки события родителю. Можно плясать и от источника по дереву иерархии, но ведь вопрос в том что вам надо, и как будет выгодней.

Мдя... я про разницу id и class совсем забыл. Стыдобища)
Промежуточная задача решена.
Спасибо за советы (надо их обдумать еще). Буду обращаться если что в эту тему.

Доброй ночи.
Я тут все бьюсь над таблицей, но уже с выпадающим списком в каждой строке. http://jsfiddle.net/sn90neoa/
Вроде разобрался со всеми родителями и прочими потомками. Но!
Как сделать, если меню открылось, но не ткнули по <li> и ткнули на другой строке опять выбор, предыдущее открытый список закрывался?
Заранее спасибо.

.selbut {
    cursor: pointer;
}
.sel {
    display: none;
    position: absolute;
    list-style: none;
    padding: 0;
    margin: 0;
}
.sel li{
    cursor: pointer;
}

$(function() {
    $('.selbut').click(function (){
        var o = $(this).find('>*');
        $('.sel').not(o.last()).slideUp();
        o.last()
          .slideToggle()
          .children()
          .click(function(e) {
              o.first()
               .text($(this).text())
               .end()
               .last()
               .slideUp();
              e.stopPropagation()   
          })
    });
    
    $(document).click(function(e){
        if($(e.target).hasClass('selbut') || !$(e.target).closest('.selbut').length) $('.sel').slideUp()
    });
});

Но если это стилизация под список, то не совсем информативно - список еще имеет и кнопку, хотя может раскрываться и щелчком по полю значения.

Спасибо. Правда я уже сделал так чтобы убирая мышку со списка он сворачивался.