gpt4 book ai didi

javascript - 动态 HTML 表上的删除、编辑和保存行功能

转载 作者:行者123 更新时间:2023-12-03 06:01:00 27 4
gpt4 key购买 nike

我有一个从数据库导入数据的 HTML 表。目前,我的底部有 4 个按钮。添加行、编辑、保存和删除。我的“添加行”按钮工作正常且功能正常。所以我的问题是一个由两部分组成的问题......

首先,如何让删除功能正常工作?

其次,如何才能让编辑和保存功能也开始工作?

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代码:

// ----- 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);

}

最佳答案

在快速模拟测试中,以下工作正常并删除选中复选框的行。

通过使用 querySelectorAll,您可以非常具体地了解您要查找的内容 - 在下面的代码中,请注意它正在查找 input 类型的所有 input 元素当前选中的>checkbox - 一旦您拥有该节点列表,就可以轻松迭代并执行您需要的任何操作 - 在本例中删除它的父行。

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;
}
}
}
}

如果您有如下可用的功能:

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);
}
}

然后您可以简化 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 ) );
}

我只是想在其中添加这一点,因为这是辛苦的一天,所以一些简单的编码可以帮助我放松 - 希望您会发现 createNode 函数很有用。

关于javascript - 动态 HTML 表上的删除、编辑和保存行功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39750121/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com