Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Вставка значений из таблицы в input'ы (https://javascript.ru/forum/dom-window/12183-vstavka-znachenijj-iz-tablicy-v-input%27y.html)

lolka84 05.10.2010 07:55

Вставка значений из таблицы в input'ы
 
Добрый день.
Имеем обычную таблицу: 3-4 столбца, несколько строк.
Под ней несколько input'ов, столько же, сколько столбцов.
Реально ли сделать, что б при клике на строке данные с каждой ячейки вставлялись в соответствующий input ?

HelpeR 05.10.2010 20:42

да реально еще как :)

lolka84 05.10.2010 20:43

Помогите новичку, самому не осилить :(

HelpeR 05.10.2010 21:07

<td onclick="setval(this, 'inp1')">Hello</td>

function setval(cell, id) {
    document.getElementById(id).value = cell.innerHTML;
}

monolithed 05.10.2010 21:29

HelpeR Не нужно такому учить :nono:

<script type="text/javascript">
window.onload = function(){
    var table = document.getElementsByTagName('td');
    var input = document.getElementsByTagName('input');
    for(i=0; i<table.length; i++){
        (function(i){
            table[i].onclick = function(){
                 input[i].value = table[i].innerHTML;
            };  
        })(i);
    }
};
</script>

<style type="text/css">
td {border-collapse:collapse; border: 1px solid #DDD; padding: 0px 5px; width: 136px;}
input {width: 148px;}
</style>

<table border="0">
    <tr>
        <td>td1</td>
        <td>td2</td>
        <td>td3</td>
    </tr>
</table>

<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />

HelpeR 05.10.2010 21:34

monolithed, я не думаю, что научил его чему то, это была помощь, более того он вообще думаю не понял нечего из кода.
А ваше решение не подходит его просьбе. Он написал три столбца и три input. Поэтому я написал ему так, что бы у него была возможность передать id input'a

lolka84 05.10.2010 22:05

monolithed, супер, то, что надо. А как сделать, что б при клике все 3 значения одновременно в инпуты падали ?

HelpeR 05.10.2010 22:10

Цитата:

Сообщение от lolka84 (Сообщение 73157)
Под ней несколько input'ов, столько же, сколько столбцов.

в вашем примере три столбца и на много больше input'ов

lolka84 05.10.2010 22:14

HelpeR, не совсем понял, что вы имеете в виду.
В задаче кол-во инпутов == кол-ву столбцов, и при клике на всей строке таблицы значение из 1го столбца должно падать в 1й инпут, 2-е значение во 2й инпут и т.д.
Естественно у меня столбцов больше, 3-4 я взял для примера, что б вы показали мне сам алгоритм, а дальше, думаю, расширить это хоть до 20ти столбцов - дело нехитрое :)
Как раз monolithed все понял именно так, как нужно ;)

monolithed 05.10.2010 22:25

Внес небольшие изменения, так корректней наверное.

<script type="text/javascript">
window.onload = function(){
    var table = document.getElementsByTagName('td');
    var input = document.getElementsByTagName('input');
    for(i=2, j=-1; i<table.length, j<input.length; i++, j++){
		(function(i, j){
			table[i].onclick = function(){
				input[j].value = table[i].innerHTML;
			};  
		})(i, j);
	}
};
</script>

<style type="text/css">
table {border-collapse: collapse;}
td { border: 1px solid #DDD; padding: 0px 5px; text-align: center;width: 136px;}
input {width: 148px;}
thead {font-weight: bold;}
</style>

<table border="1">
    <thead>
        <td>Столбец 1</td>
        <td>Столбец 2</td>
        <td>Столбец 3</td>
    </thead>
    <tr><td>td1</td><td>td2</td><td>td3</td></tr>
    <tr><td>td4</td><td>td5</td><td>td6</td></tr>
    <tr><td>td7</td><td>td8</td><td>td9</td></tr>
</table>
<br />
<input type="text" value="" /><input type="text" value="" /><input type="text" value="" /><br />
<input type="text" value="" /><input type="text" value="" /><input type="text" value="" /><br />
<input type="text" value="" /><input type="text" value="" /><input type="text" value="" /><br />


доб:

Цитата:

Сообщение от lolka84 (Сообщение 73278)
monolithed, супер, то, что надо. А как сделать, что б при клике все 3 значения одновременно в инпуты падали ?

не совсем сейчас понял


Часовой пояс GMT +3, время: 22:20.