how to change input text box into table td through jquery

Question

I am adding a new row to my existing table to jquery. The new row consists of input boxes for taking the inout form the user. After the user input, on the button click I need to make these text box appear as td elements of the table just like previous rows? How do I convert the textbox to td element of the table. Could someone please help me on this?

Html:

<table class="table table-hover" id="cust-table">
    <thead>
        <tr>
            <th>LastName</th>
            <th>FirstName</th>
        </tr>
    </thead>
    <tbody>
        <?php
            for($i=0; $i<$numrows; ++$i) {
                 $contacts = mysqli_fetch_assoc($result);
            ?>
        <tr>
            <td><?php echo $contacts['LastName']; ?></td>
            <td><?php echo $contacts['FirstName']; ?></td>
        </tr>
        <?php
        } ?>
    </tbody>
</table>

my jquery code:

function handleAdd (e) {
    var row = $(this).parent().parent().parent().parent();
    var form = '\
                            <tr>\
                                <td><input class="form-control"/></td>\
                                <td><input class="form-control"/></td>\
                                <td class="actions">\
                                    <button class="btn btn-success btn-save-new"><i class="glyphicon glyphicon-ok"></i></button>\
                                    <input type="hidden" id="SlNo" value=" ">\
                                </td>\
                            </tr>' ;
    $('#cust-table tr:last').after(form);

    $('.btn-save-new').click(function(){
        var last_name = $($(this).parent().parent().children()[0]).children().val();
        var first_name = $($(this).parent().parent().children()[0]).children().val(); 

        //how to convert the textbox to table elements??   

     });


}

Answer 1

The first thing I would do is make your life much simpler. I suggest changing the add form to look like this:

<tr>
  <td class='lastName'><input class="form-control lastNameInput"/></td>
  <td class='firstName'><input class="form-control firstNameInput"/></td>

Once you have added those classes you can simplify the logic to grab the input values. Like this:

var last_name = $('.lastNameInput').val();
var first_name = $('.firstNameInput').val();

Next, if you want to update the database with the form values, now is the time you should do it. If you do this and refresh the page, your problem is solved. If, for whatever reason, you don't want to update the database, you can do this to just remove the form and replace with the names:

$('.lastName').innerHtml = last_name;
$('.firstName').innerHtml = first_name;

This will replace the interior HTML (which is the form-control) with the raw text of the first and last name.

I hope this answers your question for you!

Answer 2

For updating the table the easiest way to do it is to delete the table rows and recreate them.

The thing that you're doing here is working with jQuery but I would recommend you to have a look at something like AngularJS because there it's easier to have the DOM and the Database in synch.

Especially have a look at the ngResource service. Also Angular does the refresh of just the row that changed and not everything. (eg have a look at the todoMVC app).

Anyway, please find the demo of the jQuery code below. (The same code is also here at jsFiddle .)

 $(function () { var $tbody = $('#cust-table tbody'); // dummy data for fill of table --> no php here var names = [{ 'firstName': 'John', 'lastName': 'Doe' }, { 'firstName': 'Susan', 'lastName': 'Doe' }]; var appendRow = function (first, last) { var $first = $('<td/>').html(first); var $last = $('<td/>').html(last); var $row = $('<tr/>').append($last, $first); $tbody.append($row); }; var createList = function() { $.each(names, function (index, name) { appendRow(name.firstName, name.lastName); }); }; createList(); // create list for the first time appendRow('<input class="form-control first" type="text" placeholder="first name"/>' + '<button id="addName">Add</button>\\n', '<input class="form-control last" type="text" placeholder="last name"/>'); $('#addName').click(function (e) { var first = $('.form-control.first').val(), last = $('.form-control.last').val(); names.push({'firstName': first, 'lastName': last}); //addHandler(first, last); changeInputToText($(e.target).closest('tr'), first, last); updateDB(); }); var updateDB = function() { //doajax and post names array // not coded here it should also update names if db changed refreshTable(); } var refreshTable = function() { $tbody.empty(); // clear table createList(); }; var changeInputToText = function ($el, first, last) { if (first == "" || last == "") return; // only not empty var $childs = $el.children(); // 0 = last name, 1 = first name input $($childs[0]).text(last); // replace content with text $($childs[1]).text(first); }; /* // not what's requested var addHandler = function(first, last) { appendRow(first, last); };*/ }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table table-hover" id="cust-table"> <thead> <tr> <th>LastName</th> <th>FirstName</th> </tr> </thead> <tbody> <!-- commented php because not available here --> <!--<?php for($i=0; $i<$numrows; ++$i) { $contacts=m ysqli_fetch_assoc($result); ?>--> <!--<tr> <td> <?php echo $contacts[ 'LastName']; ?> </td> <td> <?php echo $contacts[ 'FirstName']; ?> </td> </tr>--> <!--<?php } ?>--> </tbody> </table>