AppendChild, если вы хотите использовать обычный текст, используйте только чистый JavaScript (без jQuery)

Я хочу построить динамическую таблицу с помощью Javascript. Проблема, с которой я сталкиваюсь, - это только строки, без html в <td>. Как я могу это решить?AppendChild, если вы хотите использовать обычный текст, используйте только чистый JavaScript (без jQuery)

Мой фрагмент работает в моем коде. Но у меня есть проблема, что если в событиях [] [], например, является

"<a href="#">link</a>"

не дано, как HTML, но в тексте. Поэтому на дисплее я вижу код hmtl, а не ссылку.

for (var i = 0; i < events.length; i += 1) { 
 

 
        var row = document.createElement('tr'); 
 
        for (var y = 0; y < events[i].length; y += 2) { 
 

 
         var cell = document.createElement('td'); 
 

 

 
         var text = document.createTextNode(events[i][y]); 
 
         cell.className = 'left_table_head'; 
 

 
         cell.appendChild(text); 
 
         row.appendChild(cell); 
 

 
         var text = document.createTextNode(events[i][y + 1]); 
 

 
         var cell = document.createElement('td'); 
 
         if (y == 0) { 
 
          cell.className = 'right_table_head'; 
 
         } 
 
         if (events[i][y + 1] === '') { 
 
          cell.className += ' empty'; 
 
         } 
 
         cell.appendChild(text); 
 
         row.appendChild(cell); 
 

 
         document.getElementById('mobile-responsive').appendChild(row); 
 

 
        } 
 
       }

источник

2016-08-17 Simone Westphal

Что вы подразумеваете под «У меня есть строки, а не html в td'? – brk

Можете ли вы поделиться «событиями»? – Rayon

Не могли бы вы добавить определение примера объектов событий, чтобы этот фрагмент работал, и мы можем увидеть проблему. Всего две-три строки, нет необходимости во всем исходном объекте. –

var events = [ 
 
    ["cell1", "cell2", "cell3", "cell4"], 
 
    ["cell1", "cell2", "cell3", "cell4"] 
 
] 
 

 
for (var i = 0; i < events.length; i += 1) { 
 

 

 
    for (var y = 0; y < events[i].length; y += 2) { 
 
     var row = document.createElement('tr'); 
 
     var cell = document.createElement('td'); 
 

 

 
     var text = document.createTextNode(events[i][y]); 
 
     cell.className = 'left_table_head'; 
 

 
     cell.appendChild(text); 
 
     row.appendChild(cell); 
 

 
     var text = document.createTextNode(events[i][y + 1]); 
 

 
     var cell = document.createElement('td'); 
 
     if (y == 0) { 
 
      cell.className = 'right_table_head'; 
 
     } 
 
     if (events[i][y + 1] === '') { 
 
      cell.className += ' empty'; 
 
     } 
 
     cell.appendChild(text); 
 
     row.appendChild(cell); 
 

 
     document.getElementById('mobile-responsive').appendChild(row); 
 

 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 

 
<table id="mobile-responsive"> 
 

 
</table> 
 
<br> 
 
</body> 
 
</html>

Я предполагаю, что вы пытаетесь вставить в пустую таблицу. Кроме того, вам необходимо использовать inserRow(). Пример here

источник

2016-08-17 06:16:25

Скрипты запускаются до загрузки страниц. Попробуйте использовать функцию в функции window.onload. Предполагая, что тег таблицы в html был присвоен id как «мобильная реакция».

JS:

 window.onload = function() { 
     var events=[["dfd","<p>Hello</p>","333"],["1","22","333","4444"],["1","<a href='#'>link</a>","22","4444","55555"],["<a href='#'>link</a>","22","333","<a href='#'>link</a>","55555","666666"]]; 
     for (var i = 0; i < events.length; i += 1) { 

      var row = document.createElement('tr'); 
      for (var y = 0; y < events[i].length; y += 2) { 

       var cell = document.createElement('td'); 


       if(events[i][y] != undefined){ 
        var str=events[i][y] ; 
        var doc = new DOMParser().parseFromString(str, "text/html"); 
        var flag= Array.from(doc.body.childNodes).some(node => node.nodeType === 1); 
        if(!flag){ 
         var text = document.createTextNode(str); 
        }else{ 
        var text = document.createElement('div'); 
        text.innerHTML = str; 
        } 
       }else{ 
       var text = document.createTextNode(""); 
       } 
       cell.className = 'left_table_head'; 

       cell.appendChild(text); 
       row.appendChild(cell); 
       if(events[i][y + 1] != undefined){ 
        var str=events[i][y + 1] ; 
        var doc = new DOMParser().parseFromString(str, "text/html"); 
        var flag= Array.from(doc.body.childNodes).some(node => node.nodeType === 1); 
        if(!flag){ 
         var text = document.createTextNode(str); 
        }else{ 
        var text = document.createElement('div'); 
        text.innerHTML = str; 
        } 
       }else{ 
       var text = document.createTextNode(""); 
       } 


       var cell = document.createElement('td'); 
       if (y == 0) { 
        cell.className = 'right_table_head'; 
       } 
       if (events[i][y + 1] === '') { 
        cell.className += ' empty'; 
       } 
       cell.appendChild(text); 
       row.appendChild(cell); 

       document.getElementById('mobile-responsive').appendChild(row); 

      } 
     } 
     };

Обновленный ответ в зависимости от комментария. Надеюсь это поможет!

источник

2016-08-17 06:34:49 bhattshru

Извините, возможно, я не получил точно, что хочу. Мой фрагмент работает в моем коде. Но у меня есть проблема, что если в событиях [] [], например, есть «link», это не выдается как html, а в тексте. Поэтому на дисплее я вижу код hmtl, а не ссылку. –

AppendChild, если вы хотите использовать обычный текст, используйте только чистый JavaScript (без jQuery)

ответ

Смежные вопросы