Question

我想使用Javascript构建动态表。我面临的问题是我只有字符串，<td>中没有html。我该如何解决这个问题？

我的代码段在我的代码中有用。但我有问题，如果在事件[] []例如是

"<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);

                    }
                }

Answer 1

＆＃13;

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

＆＃13;

inserRow()

＆＃13;

我假设您正在尝试插入空表。否则，您需要使用{"something":[{"id":"1","name":"Test1"},{"id":"2","name":"Test2"},{"id":"3","name":"Test3"}]}示例为here

Answer 2

脚本在页面加载之前运行。尝试使用window.onload函数中的函数。假设html中的表格标签已被赋予“移动响应式”＃。

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);

            }
        }
        };

根据评论更新了答案。希望这有帮助！

给出纯文本的AppendChild想要只使用纯JavaScript（没有jQuery）的HTML

2 个答案: