jQuery动态添加表行

时间:2013-08-24 07:54:50

标签: jquery html-table

我想在更改select时动态添加表行 我已经编写了一个实际执行此操作的脚本,但系统尚未动态。

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
$("#noOfSegments").change(function(){
    var counter=${#noOfSegments}.val();
    for(i=0; i<counter; i++){
    var row = $("<tr><td>"i"</td><td>"i"</td><td>"i"</td><td>"i"</td><td>"i"</td></tr>");
    $("#segmentTable").append(row);
    }
});
});
</script>

<select id="noOfSegments">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

和#segmentTable是我的表ID 但上面的脚本给了我这个错误:

  

“未捕获的SyntaxError:意外的令牌{”

有人可以建议我一个解决方案吗?

4 个答案:

答案 0 :(得分:3)

你遗漏了很多括号,引号和加号。 这应该有效:

$(document).ready(function(){
$("#noOfSegments").change(function(){
    var counter=$('#noOfSegments').val();
    for(i=0; i<counter; i++){
    var row = $("<tr><td>" + i + "</td><td>" + i + "</td><td>" + i + "</td><td>" + i + "</td><td>" + i + "</td></tr>");
    $("#segmentTable").after(row.html());
    }
});
});

答案 1 :(得分:1)

DEMO

更正后的代码和

更改了$("#segmentTable").after(row.html())

$("#segmentTable").html(row.html());

$(document).ready(function () {
    $("#noOfSegments").change(function () {
        var counter = $('#noOfSegments').val();
        for (i = 0; i < counter; i++) {
            var row = $("<tr><td>" + i + "</td><td>" + i + "</td><td>" + i + "</td><td>" + i + "</td><td>" + i + "</td></tr>");
            $("#segmentTable").html(row.html());
        }
    });
});

答案 2 :(得分:0)

${#noOfSegments}更改为$('#noOfSegments')

答案 3 :(得分:0)

在java脚本中,您可以动态地执行

var table = document.createElement("table");
table.id = "tbldrp";
var row = table.insertRow(table.rows.length);
var rowItems = row.insertCell(0);
var label = document.createElement("label");
label.id = "lblDripName";
label.innerHTML = "Label Content";
rowItems.appendChild(label);