Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Добавление данных из таблицы в другую (https://javascript.ru/forum/events/50302-dobavlenie-dannykh-iz-tablicy-v-druguyu.html)

bobroed 20.09.2014 15:31

Добавление данных из таблицы в другую
 
День добрый. Есть одна таблица с тремя столбцами. Нужно при нажатии на строку добавлять эту строку в другую таблицу. Помогите, пожалуйста.

bes 21.09.2014 00:22

Цитата:

Сообщение от bobroed
День добрый. Есть одна таблица с тремя столбцами. Нужно при нажатии на строку добавлять эту строку в другую таблицу. Помогите, пожалуйста.

wtfpl

<style>
table, td, th {
	border: solid 1px;
	border-collapse: collapse;
	padding: 0.5em;
	cursor: pointer;
}
</style>

<table class="table1">
	<tr>
		<td>как</td>
		<td>так</td>
	</tr>
	<tr>
		<th>так</th>
		<th>как</th>
	</tr>
</table>
<br/>
<table class="table2">
	<tr>
		<td>1</td>
		<td>2</td>
	</tr>
</table>

<script>
(function () {
	var table1 = document.getElementsByClassName("table1")[0];
	var table2 = document.getElementsByClassName("table2")[0];
	table1.addEventListener("click", function () {
		var target = event.target;
		if (target.tagName == "TD" || target.tagName == "TH") {
			table2.firstElementChild.appendChild(target.parentNode.cloneNode(true));
		}
	});
})();
</script>

Faab 21.09.2014 01:22

Цитата:

Сообщение от bes (Сообщение 331584)

:lol:

bes 21.09.2014 08:41

Цитата:

Сообщение от Faab
:lol:

добавлена поддержка ff и ie8 :D
<!doctype html>
<meta charset="utf-8"/>
<style>
table, td, th {
	border: solid 1px;
	border-collapse: collapse;
	padding: 0.5em;
	cursor: pointer;
}
</style>

<table class="table1">
	<tr>
		<td>как</td>
		<td>так</td>
	</tr>
	<tr>
		<th>вот</th>
		<th>так</th>
	</tr>
</table>
<br/>
<table class="table2">
	<tr>
		<td>good</td>
		<td>day</td>
	</tr>
</table>

<script>
(function () {
if(document.getElementsByClassName) {
	getElementsByClass = function(classList, node) {
		return (node || document).getElementsByClassName(classList)
	}
} else {
	getElementsByClass = function(classList, node) {
		var node = node || document,
		list = node.getElementsByTagName('*'), 
		length = list.length,  
		classArray = classList.split(/\s+/), 
		classes = classArray.length, 
		result = [], i,j;
		for(i = 0; i < length; i++) {
			for(j = 0; j < classes; j++)  {
				if(list[i].className.search('\\b' + classArray[j] + '\\b') != -1) {
					result.push(list[i])
					break
				}
			}
		}
		return result;
	}
}

function addEvent(elem, evType, fn) {
	if (elem.addEventListener) {
		elem.addEventListener(evType, fn, false);
	}
	else if (elem.attachEvent) {
		elem.attachEvent('on' + evType, fn)
	}
	else {
		elem['on' + evType] = fn
	}
}

	var table1 = getElementsByClass("table1")[0];
	var table2 = getElementsByClass("table2")[0];
	addEvent(table1, "click", function (event) {
		var target = event.target || window.event.srcElement;
		if (target.tagName == "TD" || target.tagName == "TH") {
			var tbody = table2.firstElementChild || table2.children[0];
			tbody.appendChild(target.parentNode.cloneNode(true));
		}
	});
})();
</script>

kostyanet 21.09.2014 18:40

Боброед, не слушайте их, дело тут не в лицензиях, а в том, что надо взять строку из таблицы 1 и скопировать ее куда-нибудь в таблицу 2. Вот и все. Элементарно.

bes 21.09.2014 18:51

Цитата:

Сообщение от bobroed
День добрый. Есть одна таблица с тремя столбцами. Нужно при нажатии на строку добавлять эту строку в другую таблицу. Помогите, пожалуйста.

Цитата:

Сообщение от kostyanet
Боброед, не слушайте их, дело тут не в лицензиях, а в том, что надо взять строку из таблицы 1 и скопировать ее куда-нибудь в таблицу 2. Вот и все. Элементарно.

не совсем так: сначала нужно создать таблицу с тремя столбцами, затем создать обработчик нажатия на строку этой таблицы, в котором происходит добавление копии этой строки в другую таблицу.

kostyanet 22.09.2014 07:35

Ну это я подыграл. Тут, конечно, корячится datagrid, который ТС может и найти готовый. На js их как грязи.

ТС, набирайте javascript datagrid и все у вас будет.


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