Question

我在表单中有一个表格，如下所示：

<td><input type="text" name="code[0]" id="code[0]"/></td>
<td><input type="text" name="name[0]" id="name[0]"/></td>
<td><input type="text" name="cost[0]" id="cost[0]"/></td>
<td><input type="text" name="quantity[0]" id="quantity[0]"/></td>
<td><input type="text" name="total[0]" id="total[0]" value=""/></td>

当代码更改时，名称和成本应根据更改，数据从服务器重新获取。我做了。通过单击该行，可以在任何给定行中删除给定行。我需要获取行列并附加delete命令，删除所选行并使用相应数据重新更新剩余行。
我的挑战是要更新正确的行和列。

这就是我所做的：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>
    <link href="jquery-ui.css" type="text/css"/>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="jquery-ui.js" type="text/javascript"></script>
    <script>

        function addRow(){
            var n=$("#itemsTable tbody tr").length;
            var tds="<tr id='row"+n+"'>";
            tds+="<td><img src='ico.ico' onclick='removeRow(this);'/></td>";
            tds+="<td><input type='text' name='code' id='code' onchange='searchByCode(this);'/></td>";
            tds+="<td><input type='text' name='name' id='name' onkeyup='search(this);'/></td>";
            tds+="<td><input type='text' name='cost' id='cost' onchange='rowTotal(this);'/></td>";
            tds+="<td><input type='text' name='quantity' id='quantity' onchange='rowTotal(this);'/></td>";
            tds+="<td><input type='text' name='value' id='value' readonly/></td>";
            tds+="</tr>";
            $("#itemsTable tbody").append(tds);
            init();
        }
        function search(row){
            $('#name').autocomplete('product/autocomplete',function(data){
                //update this row
                var products=data['details'];
                for(var i=0;i<products.length;i++){
                    var product=products[i];
                    $('#code').val(product.code);
                    $('#name').val(product.name);
                    $('#cost').val(product.cost);
                }

            }); 
        }
        function searchByCode(row){
            var code=$(row).$('#name').val();
            $.getJSON('product/searchbycode',function(data){
                //update this row
                var products=data['details'];
                for(var i=0;i<products.length;i++){
                    var product=products[i];
                    $('#code').val(product.code);
                    $('#name').val(product.name);
                    $('#cost').val(product.cost);
                }

            }); 
        }
        function init(){
            //this is just to give an idea or the rows, but are added dynamically
            var rows=$("#itemsTable tbody tr").length;
            for(var i=0;i<=rows;i++){
                $("input[name='code']").val(1001);
                $("input[name='name']").val("Bread");
                $("input[name='cost']").val(40);
                $("input[name='quantity']").val(1);
            } 
        }
        function removeRow(row){
            $(row).closest('tr').remove();
        }
        function rowTotal(row){
            var rowindex=$(row).closest('tr').index();
            //how do i get the row values here
            var value=0;
            var cost=parseFloat($("input[name='cost']").val());
            var quantity= parseFloat($("input[name='quantity']").val());
            value=cost*quantity;
            $("input[name='value']").val(value.toFixed());

        }
        function sumTotal(rows){
            var rows=$('#itemsTable tbody tr').lenght;
            var value=0;
            //i ca
            for(var i=0;i<rows;i++){
                var cost=parseFloat($("input[name='cost']").val());
                var quantity= parseFloat($("input[name='quantity']").val());
                value=cost*quantity;
                $("input[name='sum']").val()
            }
        }
    </script>
    <script>
        $(document).ready(function(){
            var i=0;
            while(i<4){
                addRow();i++;
            }
        });
    </script>
</head>

<body>
    <table id="itemsTable">

        <thead></thead>
        <tbody></tbody>
        <tfoot><input type='text' value='0' id='sum'name="sum" /></tfoot>
    </table>
</body>
</html>

Answer 1

这样做：

$("tr").click(function() {
    alert("deleting row "+$(this).index());
    $(this).remove();
});

下面是jsFiddle的实例。

如果你想要实际添加删除按钮到每一行并让该按钮删除该行使用此代码：

$(function() {

window.deleteParentTr = function(theThis) {
    $(theThis).closest('tr').remove();
};
$("tr").append("<td><input value='delete' type='submit' onclick='window.deleteParentTr(this);' /></td>");    
});

现场的例子是here

jQuery多维输入数组

1 个答案: