Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.10.2010, 07:55
Кандидат Javascript-наук
Отправить личное сообщение для lolka84 Посмотреть профиль Найти все сообщения от lolka84
 
Регистрация: 23.08.2010
Сообщений: 123

Вставка значений из таблицы в input'ы
Добрый день.
Имеем обычную таблицу: 3-4 столбца, несколько строк.
Под ней несколько input'ов, столько же, сколько столбцов.
Реально ли сделать, что б при клике на строке данные с каждой ячейки вставлялись в соответствующий input ?
Ответить с цитированием
  #2 (permalink)  
Старый 05.10.2010, 20:42
Аватар для HelpeR
Профессор
Отправить личное сообщение для HelpeR Посмотреть профиль Найти все сообщения от HelpeR
 
Регистрация: 21.10.2008
Сообщений: 241

да реально еще как
Ответить с цитированием
  #3 (permalink)  
Старый 05.10.2010, 20:43
Кандидат Javascript-наук
Отправить личное сообщение для lolka84 Посмотреть профиль Найти все сообщения от lolka84
 
Регистрация: 23.08.2010
Сообщений: 123

Помогите новичку, самому не осилить
Ответить с цитированием
  #4 (permalink)  
Старый 05.10.2010, 21:07
Аватар для HelpeR
Профессор
Отправить личное сообщение для HelpeR Посмотреть профиль Найти все сообщения от HelpeR
 
Регистрация: 21.10.2008
Сообщений: 241

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

function setval(cell, id) {
    document.getElementById(id).value = cell.innerHTML;
}
Ответить с цитированием
  #5 (permalink)  
Старый 05.10.2010, 21:29
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

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

<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="" />

Последний раз редактировалось monolithed, 05.10.2010 в 21:34.
Ответить с цитированием
  #6 (permalink)  
Старый 05.10.2010, 21:34
Аватар для HelpeR
Профессор
Отправить личное сообщение для HelpeR Посмотреть профиль Найти все сообщения от HelpeR
 
Регистрация: 21.10.2008
Сообщений: 241

monolithed, я не думаю, что научил его чему то, это была помощь, более того он вообще думаю не понял нечего из кода.
А ваше решение не подходит его просьбе. Он написал три столбца и три input. Поэтому я написал ему так, что бы у него была возможность передать id input'a
Ответить с цитированием
  #7 (permalink)  
Старый 05.10.2010, 22:05
Кандидат Javascript-наук
Отправить личное сообщение для lolka84 Посмотреть профиль Найти все сообщения от lolka84
 
Регистрация: 23.08.2010
Сообщений: 123

monolithed, супер, то, что надо. А как сделать, что б при клике все 3 значения одновременно в инпуты падали ?
Ответить с цитированием
  #8 (permalink)  
Старый 05.10.2010, 22:10
Аватар для HelpeR
Профессор
Отправить личное сообщение для HelpeR Посмотреть профиль Найти все сообщения от HelpeR
 
Регистрация: 21.10.2008
Сообщений: 241

Сообщение от lolka84 Посмотреть сообщение
Под ней несколько input'ов, столько же, сколько столбцов.
в вашем примере три столбца и на много больше input'ов
Ответить с цитированием
  #9 (permalink)  
Старый 05.10.2010, 22:14
Кандидат Javascript-наук
Отправить личное сообщение для lolka84 Посмотреть профиль Найти все сообщения от lolka84
 
Регистрация: 23.08.2010
Сообщений: 123

HelpeR, не совсем понял, что вы имеете в виду.
В задаче кол-во инпутов == кол-ву столбцов, и при клике на всей строке таблицы значение из 1го столбца должно падать в 1й инпут, 2-е значение во 2й инпут и т.д.
Естественно у меня столбцов больше, 3-4 я взял для примера, что б вы показали мне сам алгоритм, а дальше, думаю, расширить это хоть до 20ти столбцов - дело нехитрое
Как раз monolithed все понял именно так, как нужно
Ответить с цитированием
  #10 (permalink)  
Старый 05.10.2010, 22:25
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

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

<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 Посмотреть сообщение
monolithed, супер, то, что надо. А как сделать, что б при клике все 3 значения одновременно в инпуты падали ?
не совсем сейчас понял

Последний раз редактировалось monolithed, 05.10.2010 в 22:30.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Замена значений ячеек таблицы. madgals Events/DOM/Window 53 13.04.2020 12:14
Умножение численных значений формы ввода FastSP Общие вопросы Javascript 8 08.04.2012 20:45
Ширина таблицы Syltan (X)HTML/CSS 1 01.05.2010 22:33
Переодическое обновление значений для графика, функция для обновления значений yupa87 Общие вопросы Javascript 0 09.07.2009 14:48
Фиксированный заголовок таблицы ilshat Элементы интерфейса 6 20.12.2008 00:35