jQuery Multi dimensional input array

Question

I have a table inside a form that looks as follows:

<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>

When the code changes, the name and cost should change according, the data is re-fetched form the server. That I have done. One can delete a given row while at any given row by clicking the row. I need to get the row column and attach the delete command,which remove the selected row and re-update the remaining rows with the respective data.
My challenge is getting the correct row and column to update.

This is what I have done:

<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>

Ben · Accepted Answer · 2012-03-13 10:27:11Z

1

Do this:

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

Heres a live example on jsFiddle.

If you want do actually add the delete button to each row and have that button delete the row use this code:

$(function() {

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

And the live example for that is here

edited Mar 13, 2012 at 10:27

answered Mar 13, 2012 at 10:16

Ben

10.3k21 gold badges104 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery Multi dimensional input array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related