Question

我正在尝试将新动态创建的行添加到表中，但我不能。我发现这个例子有一个添加行和删除行功能。但它不起作用。知道为什么不会这样吗？事情看起来就在这里......

<html>
<head>
    <title>Test JS</title>  

<script src="jquery-1.7.2.js" type="text/javascript">
 <!-- jQuery Code will go underneath this -->
$('.add').live('click',function(){
    $(this).val('Delete');
    $(this).attr('class','del');

    var appendTxt = "<tr><td><input type="text" name="input_box_one[]" /></td><td><input type="text" name="input_box_two[]" /></td><td><input class="add" type="button" value="Add More" /></td></tr>";
    $("tr:last").after(appendTxt);
});
</script>

</head>
<body>

<table id="options-table">
    <tbody>
        <tr>
            <td>Input-Box-One</td>
            <td>Input-Box-Two</td>
            <td></td>
        </tr>
        <tr>
            <td><input type="text" name="input_box_one[]" /></td>
            <td><input type="text" name="input_box_one[]" /></td>
            <td><input class="del" type="button" value="Delete" /></td>
        </tr>
        <tr>
            <td><input type="text" name="input_box_one[]" /></td>
            <td><input type="text" name="input_box_one[]" /></td>
            <td><input class="add" type="button" value="Add More" /></td>
        </tr>
    </tbody>
</table>

</body>
</html>

请帮忙，我需要这样做以避免界面混乱...我知道论坛中有很多例子但似乎没有工作。我在同一文件夹中也有jquery.js文件，我的.php文件包含上面显示的相同代码

Answer 1

您在 var appendTxt 中使用双引号。更改单引号的双引号将起作用。

var appendTxt = "<tr><td><input type='text' name='input_box_one[]' /></td><td><input type='text' name='input_box_two[]' /></td><td><input class='add' type='button' value='Add More' /></td></tr>";

检查这个小提琴 http://jsfiddle.net/4LcgA/

像这样改变你的代码

<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
$('.add').live('click',function(){
    $(this).val('Delete');
    $(this).attr('class','del');
var appendTxt = "<tr><td><input type='text' name='input_box_one[]' /></td><td><input type='text' name='input_box_two[]' /></td><td><input class='add' type='button' value='Add More' /></td></tr>";

    $("tr:last").after(appendTxt);
});
</script>

Answer 2

在引号内使用引号时使用转义序列！试试这个，

 var appendTxt = "<tr><td><input type=\"text\" name=\"input_box_one[]\" /></td><td><input type=\"text\" name=\"input_box_two[]\" /></td><td><input class=\"add\" type=\"button\" value=\"Add More\" /></td></tr>";

jquery向表中添加行

2 个答案: