Sending Dynamic Table Data to Server Side

0

Step 1: Add the jquery main file.

Step 2:  Add the following Code.

 function saveValues( ) {
  var tableMatRequire = [];
        $('#matReqTable tr').each(function (row, tr) {
            tableMatRequire.push({
                IndentNo: $('.indentClass').val(),
                MatReqName: $(tr).find('td:eq(1)').find('#matReqPart').val(),
                MatQuantity: $(tr).find('td:eq(2)').find('#matReqQuant').val()
            });
        });
        tableMatRequire.shift();
sendData(tableMatRequire);
}

Note:  Here 'matReqTable' is the table ID,

matReqPart is the table column id, here it is textbox, if you have label then just do,

 MatReqName: $(tr).find('td:eq(1)').val(),

Step 3: In the above step we have save the dynamic table values in an array..

Now, pass this array by ajax to the server control function :


Add the following code :

function sendData(tableMatRequire)
{
 $.ajax({
            type: "POST",
            url: "/Indent/Index",  // Here pass the required url
            dataType: "json",
            contentType: "application/json",
            data: JSON.stringify({
             
                MatReq: tableMatRequire,
               
            }),
            success: function (data) {
                alert("Data send !");
            }

        });
}

Read More »

Making Add Row functionality in Html table using jquery

0

Step 1:

Add Jquery download file or use the CDN provided :


<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

Step 2:

Make your html table ..

 <h3>Add/ Delete Row </h3>
<div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-9">
            <table class="table table-responsive" id="maintable">
                <thead>
                    <tr>
                        <th class="sno">S.No</th>
                        <th class="Particular">Particulars</th>
                        <th class="Qty">Qty</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="data-contact-person">
                        <td>
                                               
                            <input type="text" id="Pro_Sno" value="1" class="form-control " /></td>
                        <td>
                            <input type="text" id="Pro_Part" class="form-control" /></td>
                        <td>
                            <input type="number" id="Pro_Quant" class="form-control" /></td>
                        <td>
                            <button type="button" id="btnAdd1" class="btn btn-xs btn-primary classAdd" ">Add More</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    <div class="col-md-2"></div>
</div>


Step 3:
//This is the javascript code file :

<script type="text/javascript">
    
    $(document).ready(function () {
        $(document).on("click", ".classAdd", function () { //on is used for getting click event for dynamically created buttons

            var rowCount = $('.data-contact-person').length + 1;
            var contactdiv = '<tr class="data-contact-person">' +
                '<td><input type="text" value=' + rowCount + ' id="Pro_Sno" class="form-control" /></td>' +
                '<td><input type="text" id="Pro_Part" class="form-control" /></td>' +
                '<td><input type="number" id="Pro_Quant" class="form-control" /></td>' +
                '<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
                '<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
                '</tr>';
            $('#maintable').append(contactdiv); // Adding these controls to Main table class
        });

        $(document).on("click", ".deleteContact", function () {
            $(this).closest("tr").remove(); // closest used to remove the respective 'tr' in which I have my controls 

        });


 });

Note :  I have used bootstrap files here just to provide some css, its optional, if required add bootstrap file too.

Step 4:

Run the Application

You will get the output like this : 

Read More »