The script presented in this page it is a JavaScript object that can be used to
Add and Delete dinamically rows with input fields in HTML table.
- The new row in table is added directly after the clicked row.
- The columns with rows index (ID) must have the class "tbl_id".
- The input text fields added in table columns has the name with "[]" (tn1[]), so, the value of those input fields can be easily stored and passed as an array to a script on server.
Script code - click to select it
<table id="table1" border="1">
<tr><th>ID</th><th>Col-1</th><th>Col-2</th><th>Delete</th><th>Add Rows</th></tr>
<tr>
<td class="tbl_id">1</td><td><input type="text" name="tm1[]"/></td><td><input type="text" name="nm2[]"/></td>
<td><input type="button" value="Delete" onclick="ob_adRows.delRow(this)"/></td>
<td><input type="button" value="Add Row" onclick="ob_adRows.addRow(this)"/></td>
</tr>
</table>
<div><input type="button" value="Add Row at end" onclick="ob_adRows.addRow()"/></div>
<script>
//JS class to add/delete rows in html table - https://coursesweb.net/javascript/
//receives table id
function adRowsTable(id){
var table = document.getElementById(id);
var me = this;
if(document.getElementById(id)){
var row1 = table.rows[1].outerHTML;
//adds index-id in cols with class .tbl_id
function setIds(){
var tbl_id = document.querySelectorAll('#'+ id +' .tbl_id');
for(var i=0; i<tbl_id.length; i++) tbl_id[i].innerHTML = i+1;
}
//add row after clicked row; receives clicked button in row
me.addRow = function(btn){
btn ? btn.parentNode.parentNode.insertAdjacentHTML('afterend', row1): table.insertAdjacentHTML('beforeend',row1);
setIds();
}
//delete clicked row; receives clicked button in row
me.delRow = function(btn){
btn.parentNode.parentNode.outerHTML ='';
setIds();
}
}
}
//create object of adRowsTable(), pass the table id
var ob_adRows = new adRowsTable('table1');
</script>
- Demo:
Daily Test with Code Example
HTML
CSS
JavaScript
PHP-MySQL
Which attribute specifies the URL address where to send the form-data?
method action name<form action="script.php" method="post"> ... </form>
Which CSS property can be used to break lines in the middle of words?
word-wrap line-height font-size#id {
width: 100px;
word-wrap: break-word;
}
Which function sorts the elements of an array into alphabetical order, based on the string values?
pop() sort() shift()var tutorials = ["php", "html", "css", "flash"];
tutorials.sort();
alert(tutorials[0]); // css
Indicate the function that returns the value of the last element into an array.
current() next() end()$code =[10=>"Perl", 20=>"PHP", 21=>"Python", 30=>"JavaScript");
$last = end($code);
echo $last; // JavaScript