Как я могу удалить таблицы и заменить их на DIV?

Question

Я не использую jQuery. Я хочу удалить все теги таблицы (table, td, tr и т. Д.) И соответствующие закрывающие теги, сохраняя при этом содержимое. Я не могу редактировать код, который создает этот HTML. Он генерирует что-то вроде этого:

<table>
    <tbody>
       <tr>
           <td>
              <div>
                 <a></a>
              </div>
           </td>
       </tr>
    </tbody>
</table>

Я хочу удалить весь мусор, чтобы он просто получился таким:

<div>
     <a></a>
</div>

Я искал некоторое время и не могу найти ничего подобного.

Answer 1

Если вы работаете в DOM (на стороне клиента) и имеете ссылку на таблицу:

// table references the table DOM element
var keep = document.createDocumentFragment(),
    tds = table.getElementsByTagName('td'),
    td, i, l;

// extract the content of each cell
for (i = 0, l = tds.length; i < l; i++) {
    td = tds[i];
    while(td.firstChild) {
         keep.appendChild(td.firstChild);
    }
}

// insert the content before the table (or where ever you want)
table.parentNode.insertBefore(keep, table);
// remove the table
table.parentNode.removeChild(table);

DEMO

Это перебирает все ячейки и добавляет каждый дочерний узел к DocumentFragment ^[MDN] .При этом дочерний узел (контент, который мы хотим сохранить) удаляется из таблицы.Затем все они вставляются перед таблицей и таблица удаляется.

---

Если у вас есть HTML-строка, вы можете сгенерировать DOM, создав фиктивный элемент:

var dummy = document.createElement('div');
dummy.innerHTML = html;

var table = dummy.getElementsByTagName('table')[0];
// or table = dummy.children[0];

Если это не то, что вам нужно, вы должны предоставить больше информации.

Answer 2

Смотрите этот плагин, который делает именно то, что вам нужно

https://github.com/ryandoom/jquery-plugin-table-to-div