Форум

HelpeR · #11 (**permalink**) 05.10.2010, 22:33

window.onload = function() { // хотя лучше повесить обработчик на DOMContentLoaded
    var table = document.getElementById('tbl');
    for(var i = 0; i < table.rows.length; i++) {
        for(var c = 0; c < table.rows[i].cells.length; c++) {
            (function(c) {
                table.rows[i].cells[c].onclick = function() {
                    document.getElementById('input' + c).value = table.rows[i].cells[c].innerHTML;
                }
            })(c)
        }
    }
}

Таблице присвоишь id="tbl" а инпутам дашь id="input0" id="input1" id="input2"
monolithed, вот что я имел в виду

lolka84 · #12 (**permalink**) 05.10.2010, 22:36

monolithed, тут вы меня уже немного не поняли.
Вот смотрите, имеем:

<table border="1">
  <tr><td>td4</td><td>td5</td><td>td6</td></tr>
  <tr><td>td7</td><td>td8</td><td>td9</td></tr>
  <tr><td>td7</td><td>td8</td><td>td9</td></tr>
  <tr><td>td7</td><td>td8</td><td>td9</td></tr>
</table>
<input type="text" value="" id="1" /><input type="text" value="" id="2" /><input type="text" value="" id="3" />

Нужно, что б при клике на к-л строке таблицы значение из каждой ячейки этой строки падали в соостветствующий инпут.
Т.е. грубо говоря это будет выглядеть как <tr onclick="функция"> если я все правильно понимаю.
Т.е. в конкретном примере, при щелчке на 1й строке значение td4 должно попасть в инпут id="1", значение td5 в id="2" и т.д.

lolka84 · #13 (**permalink**) 05.10.2010, 22:51

monolithed, смотрите, есть строка <tr> ... </tr>, нужно что б при клике на эту строку (ну т.е. на одну из ее ячеек <td>) скрипт "пробегал" по всем ячейкам этой строки и значение каждой ячейки (т.е. значения всех <td> строки) отправлял в отдельный input.
Получается:

<table border="1"> 
	  <tr><td>1</td><td>2</td><td>3</td></tr> 
	  <tr><td>4</td><td>5</td><td>6</td></tr> 
	  <tr><td>7</td><td>8</td><td>9</td></tr> 
	  <tr><td>10</td><td>11</td><td>12</td></tr> 
	</table> 
	<input type="text" value="" id="1" /><input type="text" value="" id="2" /><input type="text" value="" id="3" />

Кликаем к примеру на <td>2</td> - у нас значение 1 падает в id="1", знчачение 2 в id="2", значение 3 в id="3".
Кликаем на <td>9</td> например - значение 7 падает в id="1", знчачение 8 в id="2", значение 9 в id="3".
Как то так

HelpeR · #14 (**permalink**) 05.10.2010, 23:06

lolka84, лови окончательный свой результат

window.onload = function() { // хотя лучше повесить обработчик на DOMContentLoaded
    var table = document.getElementById('tbl');
    for(var i = 0; i < table.rows.length; i++) {
        (function(i) {        
            table.rows[i].onclick = function() {
                for(var c = 0; c <  table.rows[i].cells.length; c++) {
                    document.getElementById(c).value = table.rows[i].cells[c].innerHTML;
                }   
            }
        })(i);
    }
}

lolka84 · #15 (**permalink**) 05.10.2010, 23:18

<body>
<script type="text/javascript">
	window.onload = function() { // хотя лучше повесить обработчик на DOMContentLoaded
	    var table = document.getElementById('tbl');
	    for(var i = 0; i < table.rows.length; i++) {
	        (function(i) {        
	            table.rows[i].onclick = function() {
	                for(var c = 0; c <  table.rows[i].cells.length; c++) {
	                    document.getElementById(c).value = table.rows[i].cells[c].innerHTML;
	                }   
	            }
	        })(i);
	    }
	}
</script>

<table width="20%" border="1" id="tbl">
  <tr>
    <td>sdf</td>
    <td>xvb</td>
    <td>asd</td>
  </tr>
  <tr>
    <td>bc</td>
    <td>vbn</td>
    <td>as</td>
  </tr>
  <tr>
    <td>vcb</td>
    <td> vnvbn</td>
    <td>mnb</td>
  </tr>
  <tr>
    <td>bnm</td>
    <td>fghf;</td>
    <td>ffghhf;</td>
  </tr>
</table>
<input id="1" type="text" value="" /><input id="2" type="text" value="" /><input id="3" type="text" value="" />
</body>

В консоли ошибок:
Uncaught exception: TypeError: Cannot convert 'document.getElementById(c)' to object
Что не так делаю ?

HelpeR · #16 (**permalink**) 05.10.2010, 23:20

document.getElementById(c) замени на document.getElementById('inp' + c) а id у инпутов пропиши так id="inp0" id="inp1" и тд

lolka84 · #17 (**permalink**) 05.10.2010, 23:22

Все ок, спасибо огромное

Завтра буду тестить по-полной

Сам устал бы делать.

lolka84 · #18 (**permalink**) 06.10.2010, 18:01

Добрый вечер!
Усложнил себе задачу, добавил в форму chekbox и select.
Смысл такой: если в ячейке таблицы значение 1 - chekbox отмечен, если значение 0 - выключен. Напрягся, сделал, все ок, работает

С select проблема - нечего не выходит

В списке пункты, которые погружены из БД, нужно сделать, что б выбирался тот пункт option, который совпадает со значением из таблицы, т.е. дословно, который равен table.rows[i].cells[c].innerHTML.
Что имеем:

<script type="text/javascript">
	window.onload = function() { 
	    var table = document.getElementById('trtb');
	    for(var i = 0; i < table.rows.length; i++) {
	        (function(i) {        
	            table.rows[i].onclick = function() {
	                for(var c = 0; c <  table.rows[i].cells.length; c++) {
						if (document.getElementById('inp' + c).type=='checkbox') {
							if (table.rows[i].cells[c].innerHTML == '1') {
							  document.getElementById('inp' + c).checked = true;
							}
							if (table.rows[i].cells[c].innerHTML == '0') {
							  document.getElementById('inp' + c).checked = false;
							}
						}
						if (document.getElementById('inp' + c).type == 'select-one') {
                 ЧТО ТУТ ПИСАТЬ ?! :(
						}
						else {
  	                      document.getElementById('inp' + c).value = table.rows[i].cells[c].innerHTML;
						}
	                }   
	            }
	        })(i);
	    }
	}
</script>

Sweet · #19 (**permalink**) 06.10.2010, 19:50

Можно в id ячеек закладывать информацию для select/chekbox. Например "td_2_3" - это для select id="sel2" ставит selectedIndex = 3. Тип того:

<table width="200" border="1">
   <tr>
    <td id="td_1">Пункт 1</td>
    <td id="td_3">Пункт 3</td>
   </tr>
</table>
<select>
  <option selected="selected">Пункты</option>
  <option>Пункт 1</option>
  <option>Пункт 2</option>
  <option>Пункт 3</option>
</select>
<script>
document.getElementsByTagName('table')[0].onclick = function(){
  var e = arguments[0] || window.event, t = e.target || e.srcElement;
  if(t.tagName.search(/td/i) == -1) return;
  document.getElementsByTagName('select')[0].selectedIndex = t.id.match(/\d/)
}
</script>

lolka84 · #20 (**permalink**) 06.10.2010, 20:32

Sweet, Ваше решение - то, что надо, но можно ли его прикрутить к моему скрипту, в отсек

if (document.getElementById('inp' + c).type == 'select-one') { 

}

?

Форум

Справочник

Discord чат

Курсы javascript