Menu
I want to insert new row in html table when user press enter on keyboard. At beginning I already added first tr when create the table. In this tr, first td contain html dropdown list($select_chooseitem) that contain data from database.Second column is textbox. I want to use javascript to get first tr element set and create new row based on that. tr element set would be like:
<tr>
<td>first col</td>
<td>second col</td>
</tr>
I do not want to declare new tr element set. But, want to retrieve first tr element set from table. Is this possible?
$row_html ='<tr>
<td>'.$select_chooseitem.'</td>
<td><input type="text" name="order"></td>
</tr>';
$html_complete='<!DOCTYPE html>
<html lang="en">
<head>
<script>
$(function () {
// Change the selector if needed
var $table = $(".mt-table-edit");
//addNewRow();
function addNewRow() {
//get row template. We must use html() for new instance other event handler will get attached to last row
//var $tr = $("<tr><td><input/></td><td><input/></td><td><input/></td><td><input/></td></tr>");
var $tr = $("<tr><td><input/></td><td><input/></td></tr>");
$tr.find("td").eq($tr.find("td").length - 1).keyup(function (e) {
if (event.keyCode === 13) {
addNewRow();
}
});
// add template after the last row
$table.find("tbody:last-child").append($tr);
// focus on firt input of newly added row
$tr.find("td:first input").focus();
}
});
</script>
</head>
<body>
<table class="mt-table-edit">
'.$row_html.'
</table>
</body>
</html>';
echo $html_complete;
//echo $query_tbltemplateitems;
Since first one not work, other method I tried was getting $select_chooseitem in javascript to create tr element set. I tried access php variable($select_chooseitem) in js by addNewRow('.$select_chooseitem.'); ,but not working. How is proper way to access php variable value from js?
<script>
$(function () {
var $table = $(".mt-table-edit");
var $row = $(".mt-table-edit").children("tr:first");
addNewRow('.$select_chooseitem.');
function addNewRow(var)
{
//get row template. We must use html() for new instance other event handler will get attached to last row
//var $tr = $("<tr><td><input/></td><td><input/></td><td><input/></td><td><input/></td></tr>");
var $tr = $("<tr><td>var</td><td><input/></td></tr>");
$tr.find("td").eq($tr.find("td").length - 1).keyup(function (e) {
if (event.keyCode === 13)
{
addNewRow(var);
}
});
$table.find("tbody:last-child").append($tr);
$tr.find("td:first input").focus();
}
});
</script>
I have tried declare variable in js and try to access in js in head of html. not successful too. Example:
<?php
$select_chooseitem='<select>'.$option_list.'</select>';
?>
<script>
var select_chooseitem=<?php echo $select_chooseitem;?>;
</script>
Thanks in advance.
767
Kindly try the code snippet below.
$(document).on( 'keyup', '.name', function(){
if (event.which == 13 && $(this).closest("tr").is(":last-child")) {
var $tblbody = $('#mytable').find("tbody"),
$tbltrlast = $tblbody.find("tr:last"),
$trnew = $tbltrlast.clone();
$tbltrlast.after($trnew);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='mytable'>
<tbody>
<tr>
<td><input type='text' name='name' class='name' value='John Doe'></td>
</tr>
</tbody>
</table>If you want to access the first child of tr you can use this:
$('table tr:first-child')
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
