Home >Web Front-end >HTML Tutorial >Dynamically add, modify and delete html table content_html/css_WEB-ITnose
Dynamically add, modify and delete html table content_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:141312browse
1. Requirements
When adding, modifying or deleting product information on the cashier, Gu Xian can see its changes in real time
2. Solution
The cashier and Gu Xian conduct data communication through tcp transmission, and Gu Xian performs data addition, modification and deletion operations by operating the table in html
3. Code
mytest.html
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Dynamic Table</title><script type="text/javascript" src="js/dynamic_table.js"> </script></head><body><table><tr><th>名称</th><th>颜色</th><th>尺寸</th><th>单价</th><th>折扣</th><th>数量</th><th>金额</th></tr><tbody id="goods"></tbody><tr><td><input type="button" value="add" onClick="addRow('多彩1234', '红色', 'XL', '1000.00', '1.00', '1', '1000.00')" /></td><td><input type="button" value="del" onClick="removeRow('goods', '0')"/></td><td><input type="button" value="modify" onClick="modifyRow('goods', '0', '0', '张小宝')" /></td><td><input type="button" value="clear" onClick="clearRows('goods')"/></td></tr></table></body></html> dynamic_table.js
onerror=handleErrvar txt=""function handleErr(msg,url,l) { txt="本页中存在错误。\n\n" txt+="错误：" + msg + "\n" txt+="URL: " + url + "\n" txt+="行：" + l + "\n\n" txt+="点击“确定”继续。\n\n" alert(txt) return true}function addRow(name, color, size, unit, discount, count, sum) { var bodyObj=document.getElementById("goods"); if(bodyObj==null) { alert("Body of Table not Exist!"); return; } var rowCount = bodyObj.rows.length; //var cellCount = myarray.length; var newRow = bodyObj.insertRow(rowCount++); newRow.insertCell(0).innerHTML=name; newRow.insertCell(1).innerHTML=color; newRow.insertCell(2).innerHTML=size; newRow.insertCell(3).innerHTML=unit; newRow.insertCell(4).innerHTML=discount; newRow.insertCell(5).innerHTML=count; newRow.insertCell(6).innerHTML=sum;}function removeRow(tbodyID, row) { var bodyObj=document.getElementById(tbodyID); if(bodyObj==null) { alert("Body of Table not Exist!"); return; } var nrow = Number(row); if (nrow <= bodyObj.rows.length) bodyObj.deleteRow(nrow); else alert("nrow is less.");}function modifyRow(tbodyID, row, col, newvalue) { var nrow = Number(row); var ncol = Number(col); var bodyObj=document.getElementById(tbodyID); if(bodyObj==null) { alert("Body of Table not Exist!"); return; } try { //var tableObj = bodyObj.parentNode; if (nrow < bodyObj.rows.length && ncol < bodyObj.getElementsByTagName('tr')[nrow].getElementsByTagName('td').length) { //这个在ie下可以 在google下不行 //bodyObj.rows(nrow).cells(ncol).innerHTML = newvalue; //bodyObj.rows[nrow].childNodes[ncol].innerHTML = newvalue; //这个在ie和google下都可以 document.getElementById(tbodyID).getElementsByTagName('tr')[nrow].getElementsByTagName('td')[ncol].innerHTML = newvalue; } else alert("empty."); } catch (err) { alert(err.description); }}function clearRows(tbodyID) { var bodyObj=document.getElementById(tbodyID); if(bodyObj==null) { alert("Body of Table not Exist!"); return; } for (var i = 0; i < bodyObj.rows.length; ) bodyObj.deleteRow(i);} Run normally under win7 ie10 and google
4. Remarks
1. It is best not to use windows’ own Notepad, there will be encoding problems, it is recommended to use notepad, the encoding is utf8 without BOM
2. Some js functions will be available under IE but not under Google. This code is universal
Copyright statement: This article is an original article by the blogger and may not be reproduced without the blogger's permission.
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：position&containing block_html/css_WEB-ITnoseNext article：position&containing block_html/css_WEB-ITnose