jQuery追加删除标签

时间:2014-07-31 11:39:24

标签: javascript jquery html append

我尝试使用jQuery Append方法,但删除了我要附加的html代码的标签(tr,td)。为什么要删除这些以及如何强制此方法只是为了追加而不是分析我的代码?

这是一个示例文件

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">    </script>
<script type="text/javascript">
$(document).on('click', '#button1', function () {
var htmlAppend = '';
htmlAppend = htmlAppend + '<input type="hidden" name="content0" value="' + 'hiddenvalues' + '"/>' + '<tr>' + 
    '<td>' + 'content1' + '</td>' + 
    '<td>' + 'content2' + '</td>' + 
    '<td>' + 'content3' + '</td>' + 
    '<td><input style="width: 300px" type="text" name="content4"/></td>' +
'</tr>';                   
$("#ScenarioCompetenceRatings").append(htmlAppend);
});
</script>
</head>
<body>
<button id="button1">Add Row</button>
<table>
    <thead>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
            <th style="width: 300px">Column4</th>
        </tr>
    </thead>
    <tbody id="ScenarioCompetenceRatings">

    </tbody>
</table>

2 个答案:

答案 0 :(得分:1)

您正在生成无效标记。您应该将隐藏的input元素放在td元素中。 tbody元素只能包含tr个子元素。

答案 1 :(得分:0)

这是你想要建立的吗?检查我创建的小提琴 http://jsfiddle.net/FWkd2/ enter code here 检查我的小提琴