ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML テーブル content_html/css_WEB-ITnose を動的に追加、変更、削除する
HTML テーブル content_html/css_WEB-ITnose を動的に追加、変更、削除する
- WBOYオリジナル
- 2016-06-24 11:41:141323ブラウズ
1. 要件
レジカウンターで商品情報を追加、変更、または削除するとき、Gu Xian はその変更をリアルタイムで確認できることを認識する必要があります
2. 解決策
レジ係と Gu Xian は、次の方法で通信します。データ通信には tcp 送信を使用し、Gu Xian は html
3 のテーブルへのデータの追加、変更、削除を実行します。 コード
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);} win7 ie10 および google
で通常どおり実行します。 4. 注意事項1. Windows に付属のメモ帳を使用する場合は、エンコードの問題が発生するため、BOM なしで utf8 としてエンコードされた notepad++ を使用することをお勧めします。 IE では利用可能ですが、Google では利用できません。 このコードはユニバーサルです
著作権免責事項: この記事はブロガーによるオリジナルの記事であり、ブロガーの許可なく複製することはできません。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。