| S.E.K.T.O.R. | 10.07.2015 02:06 |
Цитата:
|
Сообщение от Decode
А какая у вас версия?
|
Вставка строк в таблицу
Доброго времени суток!
Вопрос конечно избитый и не раз уже поднимался, но все таки... Есть таблица <table> <tr> <td></td> </tr> <tbody id="mytestid"> </tbody> <tr> <td></td> </tr> </table> В TBODY с заданным ID требуется вставить строки. Количество строк неизвестно, формируется динамически. То есть, при нажатии кнопки выполняется AJAX запрос, который возвращает данные вида <tr> <td></td> </tr> <tr> <td></td> </tr> Необходим кроссбраузерный вариант. Удалось решить задачу при помощи jQuery
$("#mytestid tr").remove();
$("#mytestid").append("<tr><td>...</td></tr><tr><td>...</td></tr>");
То есть, такой вариант работает нормально в IE, FF, Opera. НО, в движке, под который пишу, в качестве фреймворка используется YUI 2. Соответственно просьба к знатокам: помогите переписать вышепреведенный код, либо под чистый JS либо под YUI. Заранее благодарен! |
Я правильно понимаю, перед вставкой предыдущие элементы <tr> удаляются?
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
table, td { border: 1px solid black; }
</style>
</head>
<body>
<table>
<tr>
<td>lalala</td>
</tr>
<tbody id="mytestid">
</tbody>
<tr>
<td>lalala</td>
</tr>
</table>
<button>Add cells</button>
<script>
var button = document.getElementsByTagName('button')[0],
tbody = document.getElementById('mytestid');
Element.prototype.remove = Element.prototype.remove || function() {
if(this.parentNode) {
this.parentNode.removeChild(this);
}
};
function removeChildren(elem) {
try {
elem.innerHTML = '';
} catch(e) {
while(elem.firstChild) {
elem.firstChild.remove();
}
}
}
button.onclick = function() {
removeChildren(tbody);
tbody.insertAdjacentHTML('afterBegin', '<tr><td>...</td></tr><tr><td>...</td></tr>');
};
</script>
</body>
</html>
|
Цитата:
К сожалению, ваш пример не работает в IE, ругается на tbody.insertAdjacentHTMLговорит "Недопустимый конечный элемент для данного действия." :( |
Странно, insertAdjacentHTML работает даже в старых IE. А какая у вас версия?
|
Цитата:
|
А что вы передаете вторым параметром в insertAdjacentHTML?
|
Запускаю ваш пример AS IS. Нет, сам insertAdjacentHTML работает, заменил вставку tr-td на ul-li и все отработало без проблем. Думаю причина именно в элементах. IE упорно не хочет вставлять строки в tbody, хотя jQuery .append без проблем отрабатывает и строчки вставляются :(
|
Попробуйте изменить функцию removeChildren.
function removeChildren(elem) {
while(elem.firstChild) {
elem.firstChild.remove();
}
}
|
Все равно не работает. Да и дело ведь не в удалении, а в вставке
|
Цитата:
Второе, откуда проблема? Или по-вашему этот код tbody.innerHTML=data.innerHTML; не сквозь-браузерный? Кончайте изобретать атом водорода. |
Цитата:
Цитата:
Цитата:
Сквозь-браузерный вариант получился только с jQuery
$("#addbtn").click(function() {
$("#mytestid tr").remove();
$("#mytestid").append("<tr><td>...</td></tr><tr><td>...</td></tr");
});
Ну коль jQuery могет, значит и чистый JS должен суметь.Все остальное отказывается работать на ишаке. :-/ |
Цитата:
https://learn.javascript.ru/basic-do...ти-innerhtml |
S.E.K.T.O.R.,
может данные пересылать а не html - тогда никаких проблем со вставкой. |
Вставка строк из текста в таблицу кросбраузерно
S.E.K.T.O.R.,
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
table, td { border: 1px solid black; }
</style>
</head>
<body>
<table>
<tbody id="mytestid">
<tr>
<td>lalala</td>
</tr>
<tr>
<td>lalala</td>
</tr> </tbody>
</table>
<button>Add cells</button>
<script>
var button = document.getElementsByTagName('button')[0],
tbody = document.getElementById('mytestid'),
data = '<tr><td>.1.1.</td></tr><tr><td>.2.2.</td></tr>';
button.onclick = function() {
var temp, div;
while(temp = tbody.firstChild) {
tbody.removeChild(temp);
}
div = document.createElement('div');
div.innerHTML = '<table><tbody>' + data + '</tbody></table>' ;
div = div.getElementsByTagName('tbody')[0];
while(temp = div.firstChild) {
tbody.appendChild(temp);
}
};
</script>
</body>
</html>
|
Цитата:
Про то, что innerHTML в ишаке 9-минус такой калечный, я не знал и сейчас подумал что и знать не собираюсь. У меня все равно нет такого ишака - как я проверю? |
рони, огромное спасибо, все работает :dance:
|
В теории, не обязательно имитировать таблицу, эти тр-тд отпарсятся в элементы и так, сами по себе, в том же диве. Надо проверить, мне лень.
|
Цитата:
|
| Часовой пояс GMT +3, время: 12:46. |