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, вот что я имел в виду :) |
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" и т.д. |
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". Как то так :) |
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);
}
}
|
<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 Что не так делаю ? |
document.getElementById(c) замени на document.getElementById('inp' + c) а id у инпутов пропиши так id="inp0" id="inp1" и тд
|
Все ок, спасибо огромное :)
Завтра буду тестить по-полной ;) Сам устал бы делать. |
Добрый вечер!
Усложнил себе задачу, добавил в форму 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>
|
Можно в 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>
|
Sweet, Ваше решение - то, что надо, но можно ли его прикрутить к моему скрипту, в отсек
if (document.getElementById('inp' + c).type == 'select-one') {
}
? |
| Часовой пояс GMT +3, время: 03:16. |