提示：您可以先修改部分代碼再運行
<style type="text/css">* {margin: 0;padding: 0;}body {font-family: 微軟雅黑;font-size: 14px;line-height: 24px;}.wrap {width: 960px;margin: 0 auto;}.wrap h2 {padding: 10px;text-align: center;}#list {padding-top: 10px;}#list dl {position: relative;top: 0;left: 0;border-top: #993 1px dashed;}#list dl dt {position: absolute;right: 0;width: 130px;padding: 0 10px;text-align: right;}#list dl dt a {margin-right: 10px;line-height: 40px;color: #333;text-decoration: none;}#list dl dt a:hover {color: #990;}#list dl dd {height: 40px;line-height: 40px;overflow: hidden;margin-right: 150px;padding: 0 10px;}#list dl dd input {width: 250px;height: 30px;line-height: 30px;font-family: 微軟雅黑;font-size: 14px;}.btnAdd {border-top: #990 1px solid;padding-top: 10px;}.btnAdd button {width: 120px;height: 40px;line-height: 40px;background-color: #993;border: #993 1px solid;border-radius: 8px;-webkit-border-radius: 8px;-moz-border-radius: 8px;box-shadow: inset 1px 1px 1px #fff, inset -1px -1px 1px #fff;-moz-box-shadow: inset 1px 1px 1px #fff, inset -1px -1px 1px #fff;-o-box-shadow: inset 1px 1px 1px #fff, inset -1px -1px 1px #fff;-ms-box-shadow: inset 1px 1px 1px #fff, inset -1px -1px 1px #fff;-webkit-box-shadow: inset 1px 1px 1px #fff, inset -1px -1px 1px #fff;}</style><div class="wrap"> <div class="eg"> < <h2>商品資訊管理</h2> <div id="list"> <dl> <dt>修改刪除</dt><dd>untitle</dd> </dl> </div> <div class="btnAdd"> <button id="addRecord">增加條目</button> </div> </div></div><script type="text/javascript">var addRecord = document.getElementById("addRecord");addRecord.onclick=function(){var list = document.getElementById("list");var newDl = document.createElement("dl");var newDt = document.createElement("dt");var newDd = document.createElement("dd");var newA = document.createElement("a");var newA1 = document.createElement("a");newA.setAttribute('href','');newA.setAttribute('onclick','return editItem(this)');newA1.setAttribute('href','');newA1.setAttribute('onclick','return deleteItem(this)');var txtEdit = document.createTextNode("修改");var txtDel = document.createTextNode("刪除");newA.appendChild(txtEdit);newA1.appendChild(txtDel);newDt.appendChild(newA);newDt.appendChild(newA1);newDd.appendChild(document.createTextNode("untitle"));newDl.appendChild(newDt);newDl.appendChild(newDd);list.appendChild(newDl);}function editItem(obj){var objParent = obj.parentNode;var objDd = objParent.nextSibling;var textDd = objDd.innerHTML;//alert(objDd.nodeName);objDd.innerHTML ="<input type='text' value='" + textDd + "' />";var inputbox = objDd.getElementsByTagName('input');inputbox[0].focus();obj.innerHTML = "儲存";obj.setAttribute('href','');obj.setAttribute('onclick','return saveItem(this)');return false;}function saveItem(obj){var objParent = obj.parentNode;var objDd = objParent.nextSibling;var inputbox = objDd.getElementsByTagName('input');var txtTitle = inputbox[0].value;objDd.innerHTML = txtTitle;obj.innerHTML = '修改';obj.setAttribute('onclick','return editItem(this)');return false;}function deleteItem(obj){var elm = obj.parentNode.parentNode;var list = document.getElementById('list');list.removeChild(elm);return false;}</script> </td> </tr></table>
提示：您可以先修改部分代碼再運行
