Блог

Главная - Вопросы по программированию - Обратная разработка Javascript: преобразование html-таблицы в строку / текст

Обратная разработка Javascript: преобразование html-таблицы в строку / текст

#javascript #html #string #html-table

#javascript #HTML #строка #html-таблица

Вопрос:

В настоящее время у меня есть табличная переменная, содержимое таблицы которой я хочу получить следующим образом: <table><tr></tr></table> вместо получения объекта Javascript. Есть ли решение для поиска метода, который мог бы это сделать?

Ответ №1:

попробуйте innerHTML.

Ответ №2:

Предполагается, что ваша таблица является единственной таблицей на странице. Если это не так, присвойте ей уникальный идентификатор (например, tableID ) и ссылайтесь на using getElementsById("tableID") .

 var tables = document.getElementsByTagName("table");
var firstTable = tables[0];
var tableAttr = firstTable.attributes;
// get the tag name 'table', and set it lower case since JS will make it all caps
var tableString = "<"   firstTable.nodeName.toLowerCase()   ">";
// get the tag attributes
for(var i = 0; i < tableAttr.length; i  ) {
    tableString  = " "   tableAttr[i].name   "='"   tableAttr[i].value   "'";
}

// use innerHTML to get the contents of the table, then close the tag
tableString  = firstTable.innerHTML   "</"  
    firstTable.nodeName.toLowerCase()   ">";

// table string will have the appropriate content

Вы можете увидеть это в действии в короткой демонстрации.

Необходимо изучить следующие важные моменты:

  • getElementsByTagName — получение элементов DOM по имени их тега
  • атрибуты — свойство DOM, которое получает массив атрибутов
  • innerHTML — возвращает строку HTML внутри любого DOM-объекта
  • nodeName — возвращает имя любого DOM-объекта

Если вы начнете использовать фреймворк, метод от jquery и плагин GetAttributes также потенциально могут быть полезны

Ответ №3:

Попробуйте следующий код…

 <html>
<head>
    <script type="text/javascript">
        function sample_function(){
            alert(document.getElementById('div_first').innerHTML);
        }
    </script>
</head>
<body>
<div id="div_first">
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table></div>
    <button onclick="sample_function()">Click Here</button>
</body>
</html>