Форум

S.E.K.T.O.R. · #1 (**permalink**) 10.07.2015, 00:22

Доброго времени суток!
Вопрос конечно избитый и не раз уже поднимался, но все таки...

Есть таблица

<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.

Заранее благодарен!

Decode · #2 (**permalink**) 10.07.2015, 01:13

Я правильно понимаю, перед вставкой предыдущие элементы <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>

S.E.K.T.O.R. · #3 (**permalink**) 10.07.2015, 01:37

Сообщение от Decode

Я правильно понимаю, перед вставкой предыдущие элементы <tr> удаляются?

Да, все верно. Получается некий аналог innerHTML.

К сожалению, ваш пример не работает в IE, ругается на

tbody.insertAdjacentHTML

говорит "Недопустимый конечный элемент для данного действия."

Decode · #4 (**permalink**) 10.07.2015, 01:49

Странно, insertAdjacentHTML работает даже в старых IE. А какая у вас версия?

S.E.K.T.O.R. · #5 (**permalink**) 10.07.2015, 02:06

Сообщение от Decode

А какая у вас версия?

IE 8

Decode · #6 (**permalink**) 10.07.2015, 02:09

А что вы передаете вторым параметром в insertAdjacentHTML?

S.E.K.T.O.R. · #7 (**permalink**) 10.07.2015, 02:18

Запускаю ваш пример AS IS. Нет, сам insertAdjacentHTML работает, заменил вставку tr-td на ul-li и все отработало без проблем. Думаю причина именно в элементах. IE упорно не хочет вставлять строки в tbody, хотя jQuery .append без проблем отрабатывает и строчки вставляются

Decode · #8 (**permalink**) 10.07.2015, 02:41

Попробуйте изменить функцию removeChildren.

function removeChildren(elem) {
    while(elem.firstChild) {
        elem.firstChild.remove();
    }
}

S.E.K.T.O.R. · #9 (**permalink**) 10.07.2015, 02:52

Все равно не работает. Да и дело ведь не в удалении, а в вставке

kostyanet · #10 (**permalink**) 10.07.2015, 05:05

Сообщение от S.E.K.T.O.R.

Есть таблица

Что за бред? Не бывает таких таблиц.

Второе, откуда проблема? Или по-вашему этот код

tbody.innerHTML=data.innerHTML;

не сквозь-браузерный?

Кончайте изобретать атом водорода.

Форум

Справочник

Discord чат

Курсы javascript