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

时间:2015-10-13 19:09:36

标签: javascript jquery html css node.js

我有以下代码:

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 他的第二个循环用于创建<td>动态地基于变量quant_columns的值,这就是为什么有一个javascript的原因。但我不知道该怎么做这个。根据查询结果,表格的每一行都有一定数量的确定点。

我怎么做?

2 个答案:

答案 0 :(得分:1)

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

&#13;
&#13;
$(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);
    };
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<table id="tBodyTable"></table>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

您可以使用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>

相关问题