Форум

Spindog · #1 (**permalink**) 19.08.2015, 20:17

Здравствуйте форумчане! Я в js новичок и думаю что задача эта весьма проста и тривиальна, однако я не могу уже несколько дней ее решить сам и не нашел вразумительного ответа в интернете.
Надеюсь создаю тему в нужном разделе.

Итак, существует таблица вида:

<table id="table">
<tbody>
<tr id="1">
<td class="option_1">blablabla</td>
<td class="option_2">blablabla</td>
<td class="option_3">blablabla</td>
<td class="...">blablabla</td>
<td class="option_n">blablabla</td>
</tr>
<tr id="2">
<td class="option_1">blablabla</td>
<td class="option_2">blablabla</td>
<td class="option_3">blablabla</td>
<td class="...">blablabla</td>
<td class="option_n">blablabla</td>
</tr>
<tr id="3">
<td class="option_1">blablabla</td>
<td class="option_2">blablabla</td>
<td class="option_3">blablabla</td>
<td class="...">blablabla</td>
<td class="option_n">blablabla</td>
</tr>
<tbody>
</table>

Названия классов td-шек в каждой конкретной tr-ке повторяются.

Нужно сделать ассоциативный массив где пара ключ-значение будет соответственно нужная мне td-шка в нужной мне tr-ке, для удобства обращения к ячейкам таблицы в дальнейшем скрипте. Обращений будет много, следовательно каждый раз делать это через DOM очень громоздко и неудобно. Очень хотелось бы реализовать что то типа
id[1][option_3], но пока мне удалось только создать при помощи each два массива из tr-ок и td-шек, а вот как их связать все равно не понимаю.

P.S Если что обращаться нужно не к классам, а к значениям ячеек. То есть дергать данные из таблицы.

Прикрепляю свой нубокод:

var table = $('#table').children();
		var moduls = table.children();
        var modul = [];
		var option = [];
		moduls.each(function(){
			ident = $(this);
			modul.push(ident);
		});
		options = moduls.children();
		options.each(function(){
			classes = $(this);
			option.push(classes);
		});

laimas · #2 (**permalink**) 19.08.2015, 20:24

Создавать надо объект - свойство это индекс строки, а значение массив ячеек, то есть

var tbl = {[0, 1, 2, 3, ...], [0, 1, 2, 3, ...]}

или имена классов а не индексы ячеек. Вот только что-то сомнительно, чтобы в этом действительно была потребность.

рони · #3 (**permalink**) 19.08.2015, 20:35

Spindog,

var table = $('#table');
var trs = $('tr', table);
var option = [];
trs.each(function(){
			option.push($('td',this));
		});

и всё

Spindog · #4 (**permalink**) 19.08.2015, 21:14

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

Spindog,

var table = $('#table');
var trs = $('tr', table);
var option = [];
trs.each(function(){
			option.push($('td',this));
		});

и всё

Это ассоциативный массив? А как мне тогда обращаться к значениям? Как понимаю скрипт делает мне выборку самих объектов. Я могу обращаться сразу ко всем ячейкам в определенной строке, не понимаю как обратиться к конкретной и выдернуть значение.
Еще раз извиняюсь за нубские вопросы. Уже и так вижу что перемудрил.

рони · #5 (**permalink**) 19.08.2015, 22:12

Spindog,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function() {
        var table = $('#table');
        var trs = $('tr', table);
        var option = [];
        trs.each(function() {
            option.push($('td', this));
        });
        option[1].html(12345) //изменить содержимое всех ячеек 2 строки
        option[0].eq(2).html('0-0-0-0-0-0') //изменить содержимое третей ячейки 1 строки
        alert(option[2].eq(4).html()) //получить содержимое пятой ячейки 3 строки
  });
  </script>
</head>

<body>
<table id="table">
<tbody>
<tr id="1">
<td class="option_1">blablabla</td>
<td class="option_2">blablabla</td>
<td class="option_3">blablabla</td>
<td class="...">blablabla</td>
<td class="option_n">blablabla</td>
</tr>
<tr id="2">
<td class="option_1">blablabla</td>
<td class="option_2">blablabla</td>
<td class="option_3">blablabla</td>
<td class="...">blablabla</td>
<td class="option_n">blablabla</td>
</tr>
<tr id="3">
<td class="option_1">blablabla</td>
<td class="option_2">blablabla</td>
<td class="option_3">blablabla</td>
<td class="...">blablabla</td>
<td class="option_n">555</td>
</tr>
</tbody>
</table>



</body>

</html>

Spindog · #6 (**permalink**) 19.08.2015, 22:18

Спасибо огромное! Я не знал про eq(), сидел голову ломал. Теперь буду знать.

Форум

Справочник

Discord чат

Курсы javascript