Вставка значений из таблицы в input'ы
Добрый день.
Имеем обычную таблицу: 3-4 столбца, несколько строк. Под ней несколько input'ов, столько же, сколько столбцов. Реально ли сделать, что б при клике на строке данные с каждой ячейки вставлялись в соответствующий input ? |
да реально еще как :)
|
Помогите новичку, самому не осилить :(
|
<td onclick="setval(this, 'inp1')">Hello</td>
function setval(cell, id) {
document.getElementById(id).value = cell.innerHTML;
}
|
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="" />
|
monolithed, я не думаю, что научил его чему то, это была помощь, более того он вообще думаю не понял нечего из кода.
А ваше решение не подходит его просьбе. Он написал три столбца и три input. Поэтому я написал ему так, что бы у него была возможность передать id input'a |
monolithed, супер, то, что надо. А как сделать, что б при клике все 3 значения одновременно в инпуты падали ?
|
Цитата:
|
HelpeR, не совсем понял, что вы имеете в виду.
В задаче кол-во инпутов == кол-ву столбцов, и при клике на всей строке таблицы значение из 1го столбца должно падать в 1й инпут, 2-е значение во 2й инпут и т.д. Естественно у меня столбцов больше, 3-4 я взял для примера, что б вы показали мне сам алгоритм, а дальше, думаю, расширить это хоть до 20ти столбцов - дело нехитрое :) Как раз monolithed все понял именно так, как нужно ;) |
Внес небольшие изменения, так корректней наверное.
<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 />
доб: Цитата:
|
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') {
}
? |
Мое решение основывается на том, что из ячейки я получаю число, которое соответствует selectedIndex. Если брать текст из ячейки, то, видимо, придется циклом пройтись по всем select.options[i].value и проверить их на соответствие. Это неоправданные сложности.
+ Я бы повесил onclick на таблицу - опять же, так проще. |
Цитата:
Щас еще раз сам попробую. з.ы. Как передать свойство selected пункту option при совпадении ? :) |
Видимо
select.selectedIndex = i |
if (document.getElementById('inp' + c).type == 'select-one') {
for(var q = 0; q < document.getElementById('inp' + c).length; q++) {
if (document.getElementById('inp' + c).options[q].text == table.rows[i].cells[c].innerHTML) {
document.getElementById('inp' + c).selectedIndex = q;
}
}
}
Кто помог - спасибо :) |
| Часовой пояс GMT +3, время: 20:17. |