javascript从表中删除tr

javascript remove tr from table

本文关键字：删除 tr javascript      更新时间：2024-03-22

我以前见过这个问题，但我无法解决。我有以下代码

<script type="text/javascript">
var scntDiv = $('#p_scents');
var i = $('#p_scents tr').size() + 1;
$('#addScnt').click(function() {
    scntDiv.append('<tr><td> <input type="text" name="model" id="model"/></td><td><input type="text" name="desc" id="desc"/></td><td> <input type="text" name="price" id="price"/></td><td><input type="text" name="qty" id="qty"/></td><td><a href="#" id="remScnt">Delete</a></td></tr>');   
    i++;
    return false;
});
//Remove button
$(document).on('click', '#remScnt', function() {
    if (i > 2) {
        $(this).closest('tr').remove();
        i--;
    }
    return false;
});

删除功能不起作用。请在小提琴旁帮忙：http://jsfiddle.net/scumah/xtyFh/8/

这是我的页面代码：

{embed="shared/_html_header"}
{embed="shared/_page_header"}
<style = "text/css">
{ font-family:Arial; }
h2 { padding:0 0 5px 5px; }
h2 a { color: #224f99; }
a { color:#999; text-decoration: none; }
a:hover { color:#802727; }
p { padding:0 0 5px 0; }
input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; }
</style>

<div id="main_body_content">


<h4>
<a href="#" id="addScnt">Add Another Input Box</a>
</h4>
<table class="dynatable">
<thead>
    <tr>
        <th>Model</th>
        <th>Description</th>
        <th>Price</th>
        <th>Quantity</th>
    </tr>
</thead>
<tbody id="p_scents">
    <tr>
        <td>
            <input type="text" name="model" read-only id="model"/>
        </td>
        <td>
            <input type="text" name="desc" id="desc"/>
        </td>
        <td>
            <input type="text" name="price" id="price"/>
        </td>
        <td>
            <input type="text" name="qty" id="qty"/>
        </td>
    </tr>
</tbody>
</table>
<script type="text/javascript">
var scntDiv = $('#p_scents');
var i = $('#p_scents tr').size() + 1;
$('#addScnt').click(function() {
    scntDiv.append('<tr><td> <input type="text" name="model" id="model"/></td><td><input type="text" name="desc" id="desc"/></td><td> <input type="text" name="price" id="price"/></td><td><input type="text" name="qty" id="qty"/></td><td><a href="#" id="remScnt">Delete</a></td></tr>');   
    i++;
    return false;
});
//Remove button
$(document).on('click', '#remScnt', function() {
    if (i > 2) {
        $(this).closest('tr').remove();
        i--;
    }
    return false;
});
</script>
</div>

</div><!--/main_body_content-->

{embed="shared/_page_footer"}

我了解您的问题，并根据问题提供解决方案。

在您的脚本中，所有DOM元素生成之前发生的事情，这就是为什么事件没有与元素正确绑定的原因。因此，您需要将脚本包装在document.ready()事件中，如下所示：

<script type="text/javascript">
        $(document).ready(function () {
        var scntDiv = $('#p_scents');
        var i = $('#p_scents tr').size() + 1;
        $('#addScnt').click(function () {
            scntDiv.append('<tr><td> <input type="text" name="model" id="model"/></td><td><input type="text" name="desc" id="desc"/></td><td> <input type="text" name="price" id="price"/></td><td><input type="text" name="qty" id="qty"/></td><td><a href="#" id="remScnt">Delete</a></td></tr>');
            i++;
            return false;
        });
        //Remove button
            $(document).on('click', '#remScnt', function () {
                if (i > 2) {
                    $(this).closest('tr').remove();
                    i--;
                }
                return false;
            });
        });
</script>

ID在HTML中必须是唯一的，而应使用类作为选择器，如class="remScnt"

将选择器更改为

$(document).on('click', '.remScnt', function() {

此外，将您的代码包装在文档就绪功能中

$(document).ready(function() {
});
相关文章：