I have an HTML table that imports data from a database. Currently, I have 4 buttons at the bottom. Add Row, Edit, Save, and Delete. I have the "Add Row" button working and functioning correctly. So my question is a two part question...
First, how can I get the delete function working?
Secondly, how can I get the edit and save function to start working as well?
HTML/PHP Code:
<table id="html_master">
<thead>
<tr>
<td>MR_ID</td>
<td>MR_Name</td>
<td>Buyer_ID</td>
<td>MR_POC_N</td>
<td>MR_POC_E</td>
<td>MR_POC_P</td>
<td>Select</td>
</tr>
</thead>
<tbody>
<?php
foreach ($dbh->query($sql) as $rows){
?>
<tr>
<td id="mr_id"><?php echo intval ($rows['MR_ID'])?></td>
<td id="mr_name"><?php echo $rows['MR_Name']?></td>
<td id="buyer_id"><?php echo $rows['Buyer_ID']?></td>
<td id="poc_n"><?php echo $rows['MR_POC_N']?></td>
<td id="poc_e"><?php echo $rows['MR_POC_E']?></td>
<td id="poc_p"><?php echo $rows['MR_POC_P']?></td>
<td align="center"><input type="checkbox" name="check" value="checked"></td>
</tr>
<?php
}
?>
</tbody>
</table>
<input type="button" class="add" value="Add Row" onclick="insRow('html_master')">
<input type="button" id="edit" value="Edit">
<input type="button" id="save" value="Save">
<input type="button" id="delRow" value="Delete" onclick="deleteRow('html_master')">
Javascript Code:
// ----- Deletes row -----
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
// ----- Add Row -----
function insRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.innerHTML = rowCount;
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "txtbox[]";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.name = "txtbox[]";
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.name = "txtbox[]";
cell5.appendChild(element5);
var cell6 = row.insertCell(5);
var element6 = document.createElement("input");
element6.type = "text";
element6.name = "txtbox[]";
cell6.appendChild(element6);
var cell7 = row.insertCell(6);
var element7 = document.createElement("input");
element7.type = "checkbox";
element7.name="chkbox[]";
cell7.appendChild(element7);
}
In a quick mock-up test the following works ok and deletes the rows where a checkbox is checked.
By using querySelectorAll
you can be quite specific with what you are trying to find - in the code below notice that it is looking for all input
elements of type checkbox
that are currently checked
- once you have that nodelist it is easy to iterate through and perform whatever action(s) you need - in this case remove it's parent row.
function deleteRow(id){
var tbl=document.getElementById(id);
var col=tbl.querySelectorAll('input[type="checkbox"]:checked');
if( col ){
for( var n in col )if( col[ n ].nodeType==1 ){
try {
var tr=col[ n ].parentNode.parentNode;
var tbody=tr.parentNode;
tbody.removeChild( tr );
}catch( err ){
console.warn(err);
continue;
}
}
}
}
If you have a function available like the following:
function createNode( type, attribs, parent ) {
/*
@type - the html element type you wish to add. By default if you use 'null' as the value it will insert a div
@attribs - Object literal of param:value pairs to add as attributes to the new html node
@parent - the parent html element to which the new node will be added.
This returns the new node. The parent can also be another call to `createNode`
*/
try{
var el = ( typeof( type )=='undefined' || type==null ) ? document.createElement( 'div' ) : document.createElement( type );
for( var n in attribs ) if( attribs.hasOwnProperty( n ) && n!=='innerHTML' ) el.setAttribute( n, attribs[ n ] );
if( attribs.hasOwnProperty('innerHTML') ) el.innerHTML=attribs.innerHTML;
if( parent!=null ) typeof( parent )=='object' ? parent.appendChild( el ) : document.getElementById( parent ).appendChild( el );
return el;
}catch(err){
console.warn('createNode: %s, %o, %o',type, attribs, parent);
}
}
Then you can simplify the insRow
function like:
function insRow(id){
var tbl=document.getElementById( id );
var tbody = tbl.querySelectorAll('tbody')[0];
var rows = tbody.querySelectorAll('tr');
var row = createNode( 'tr',{},tbody );
var td = createNode('td',{ innerHTML:rows.length },row );
/* add 5 table cells with textfields */
for( var i=0; i < 5; i++ ){
createNode('input',{ type:'text',name:'txtbox[]'},createNode('td',{},row ) );
}
/* Add table cell with checkbox */
createNode('input',{ type:'checkbox',name:'chkbox[]'},createNode('td',{},row ) );
}
Just thought I'd add that in there as it's been a hard day at work so a little light coding helped me unwind - hope you'll find that createNode
function useful.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.