[英]Delete, Edit, and Save Row Function on Dynamic HTML Table
I have an HTML table that imports data from a database. 我有一个从数据库导入数据的HTML表。 Currently, I have 4 buttons at the bottom. 目前,我在底部有4个按钮。 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: HTML / PHP代码:
<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: JavaScript代码:
// ----- 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. 通过使用querySelectorAll
您可以非常明确地找到要查找的内容-在下面的代码中,它正在查找当前checked
所有类型为checkbox
input
元素-一旦拥有该节点列表,就很容易迭代和执行您需要执行的任何操作-在这种情况下,请删除其父行。
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: 然后可以简化insRow
函数,例如:
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. 我只是想补充一下,因为这是辛苦的一天,所以一些简单的编码可以帮助我放松一下-希望您会发现createNode
函数很有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.