Skip to content Skip to sidebar Skip to footer
Home / Html / Jquery

Add New Row To Table Using Jquery On Enter Key Button

Post a Comment
I need to add a new to the HTML when the user enters something in the 'Other' text box. I'm using the below HTML, JavaScript and CSS code HTML: <trclass="table-row">'+ '<tdclass="table-cell">' + this.value + '</td>' + '<tdclass="table-cell">' + '<inputtype="radio"name="yes" />' + '</td>' + '<tdclass="table-cell">' + '<inputtype="radio"name="yes" />' + '</td></tr>'); } });

FIDDLE

Solution 2:

Use last() and after() to append a new row after the last one:

var new_cell_name = $('#your_other_input_field').val();
$('.table-row').last().after('<trclass="table_row">'
    + '<tdclass="table-cell">' + new_cell_name + '</td>'
    + '<tdclass="table-cell"><inputtype="text"name="yes"></td>'
    + '</tr>');

Notes: you should change the names of your text boxes to either a unique name or use an array like name="yes[]" to avoid naming conflicts.

EDIT

Just noticed you want to remove the other row and add the new one, so use replaceWith() instead:

$('.table-row').last().replaceWith('

Docs:

Solution 3:

You can add a row like this:

$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');

You can check if the textbox contains text or is empty with:

var inp = $("#txt");
// where #txt is the id of the textboxif (inp.val().length > 0) {
    //do something
}

You can detect enter press on keyboard with:

$(".table-cell-text").keyup(function (event) {
    if (event.keyCode == 13) {
          alert('You pressed enter');
    }

});

Combining these, you get something like this:

jQuery

var inp = $("#txt");
// where #txt is the id of the textbox

$(".table-cell-text").keyup(function (event) {
    if (event.keyCode == 13) {
        if (inp.val().length > 0) {
          $('#myTable tr:last').before('<tr class="table-row"><td class="table-cell">' + inp.val() + '</td>' +
            '<td class="table-cell">' +
            '<input type="radio" name="yes" />' +
            '</td>' +
            '<td class="table-cell">' +
            '<input type="radio" name="yes" />' +
            '</td></tr>');
        }
    }

});

Where you change <table> in your HTML to e.g. <table id="myTable">

HTML

<tableid="myTable"><trclass="table-header"><tdclass="table-cell">Game</td><tdclass="table-cell">Yes </td><tdclass="table-cell">No</td></tr><trclass="table-row"><tdclass="table-cell">
        FootBall
        </td><tdclass="table-cell"><inputtype="radio"name="yes"></td><tdclass="table-cell"><inputtype="radio"name="yes"></td></tr><trclass="table-row"><tdclass="table-cell">
        Hockey
        </td><tdclass="table-cell"><inputtype="radio"name="yes"></td><tdclass="table-cell"><inputtype="radio"name="yes"></td></tr><trclass="table-row"><tdclass="table-cell">
        Other
        </td><tdclass="table-cell-text"><inputtype="text"name="yes"id="txt"></td></tr></table>

I didn't run the code yet, so beware of any typos. Hope that helps you out.

You can find a jsFiddleHERE.

If you want the 'other' tr to disappear, you can use .replaceWith() instead of .before()

Post a Comment for "Add New Row To Table Using Jquery On Enter Key Button"

Menu Halaman Statis

© 2022 - Html5 Tech