在Jquery $().append();中插入javascript代码

Insert javascript code inside Jquery $().append();

本文关键字：插入 javascript 代码 append Jquery      更新时间：2023-09-26

我有以下代码:

for (var key in returns) {              
    $('#tBodyTable').append(''
        <tr>'
            <td >'
                <label>'+ returns[key].name +'</label>'
            </td>'
            <script>'
                for (var i in quant_colums){'
                    document.write("<td ><center><label>a</label></center></td>");'
               };'
            </script>'
        </tr>'
  ');
};

这段代码位于Jquery Ajax的return中，第一个循环动态覆盖body表。T第二个循环是基于变量quant_columns的值动态创建<td>，这就是为什么在那里有一个javascript。但是我不知道该怎么做。根据查询的结果，表的每一行在确定点上会有一些列。

我怎么能做到呢?

对于这种情况，您不需要插入脚本标记，您可以在同一个函数中完成所需的一切。

$(function(){
    var returns = {t1: {name:'teste1'},t2:{name:'teste2'},t3:{name:'teste2'}};
    var quant_colums = 3;
    var $table = $('#tBodyTable');
    for (var key in returns) {     
        var $tr = 	'<tr>'
						<td >'
                    		<label>'+ returns[key].name +'</label>'
                		</td>'
            		</tr>';
        
        for (var i in quant_colums){
            $tr.append("<td ><center><label>a</label></center></td>");
        }
        $table.append($tr);
    };
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<table id="tBodyTable"></table>

您可以使用DOM根据您拥有的数据动态地插入元素，如下所示。

var returns, quant_colums, tbody;
returns = {
  a: {name: "a"},
  b: {name: "b"},
  c: {name: "c"}
};
quant_colums = [0, 1, 2, 3];
tbody = window.document.querySelector("#tBodyTable");
Object.keys(returns).forEach(function (key) {
  var row, cell;
  row = tbody.insertRow();
  cell = row.insertCell();
  cell.innerHTML = '<label>' + returns[key].name + '</label>';
  quant_colums.forEach(function (i) {
    cell = row.insertCell();
    cell.innerHTML = "<center><label>" + i + "</label></center>";
  });
});
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="script.js"></script>
    </head>
    <body>
        <table>
            <tbody id="tBodyTable"></tbody>
        </table>
    </body>
</html>

相关文章：