請為下面的html添加一個修改按鈕，以便對書名、價格進行修改

下面的HTML段落，在書名和價格輸入錯誤的情況下，無法進行修改。添加一個按鈕，對已經輸入的信息進行修改。

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ??? ?<style>
?? ??? ??? ?tr{
?? ??? ??? ??? ?height: 60px;
?? ??? ??? ??? ?}
?? ??? ??? ?td ,th{
?? ??? ??? ??? ?width: 150px;
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ??? ?border: 1px solid red;
?? ??? ??? ??? ?}
?? ??? ?</style>
?? ??? ?<script>
?? ??? ??? ?function addNode(){
?? ??? ??? ??? ?var tab = document.getElementById ("tab");
?? ??? ??? ??? ?var tr = document.createElement("tr");
?? ??? ??? ??? ?var td = document.createElement("td");
?? ??? ??? ??? ?td.innerHTML = '<input type="Text"/ size="10px" οnblur="saveVal(this)" />';
?? ??? ??? ??? ?var td2 = document.createElement("td");
?? ??? ??? ??? ?td2.innerHTML = '<input type="Text" size="10px" οnblur="saveVal(this)" />';
?? ??? ??? ??? ?var td3 = document.createElement("td");
?? ??? ??? ??? ?td3.innerHTML = '<input type="button" value="添加" οnclick="addNode()" />'+
?? ??? ??? ??? ??? ??? ??? ??? ?'<Input type="button" Value="刪除" οnclick="removeNode(this)" />';
?? ??? ??? ??? ?tab.appendChild(tr);
?? ??? ??? ??? ?tr.appendChild(td);
?? ??? ??? ??? ?tr.appendChild(td2);
?? ??? ??? ??? ?tr.appendChild(td3);
?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ??? ?function saveVal(thi){
?? ??? ??? ??? ?var td =thi.parentNode;
?? ??? ??? ??? ?td.innerText = thi.value;

?? ??? ??? ?}
?? ??? ??? ?function removeNode(abc){
?? ??? ??? ??? ?var tr =abc.parentNode.parentNode;
?? ??? ??? ??? ?tr.remove();
?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ?</script>
?? ?</head>
?? ?<body>
?? ??? ?<table id="tab" border="1px" align="center">
?? ??? ??? ?<tr>
?? ??? ??? ??? ?<th>圖書名稱</th>
?? ??? ??? ??? ?<th>圖書價格</th>
?? ??? ??? ??? ?<th>操作</th>
?? ??? ??? ?</tr>
?? ??? ??? ?<tr>
?? ??? ??? ??? ?<td>javaSE</td>
?? ??? ??? ??? ?<td>19</td>
?? ??? ??? ??? ?<td>
?? ??? ??? ??? ??? ?<input type="button" name="" id="" value="添加" οnclick="addNode()" />
?? ??? ??? ??? ??? ?<input type="button" name="" id="" value="刪除" οnclick="removeNode(this)" />
?? ??? ??? ??? ?</td>
?? ??? ??? ?</tr>
?? ??? ??? ?<tr>
?? ??? ??? ??? ?<td>javaEE</td>
?? ??? ??? ??? ?<td>29</td>
?? ??? ??? ??? ?<td>
?? ??? ??? ??? ??? ?<input type="button" name="" id="" value="添加" οnclick="addNode()" />
?? ??? ??? ??? ??? ?<input type="button" name="" id="" value="刪除" οnclick="removeNode(this)"/>
?? ??? ??? ??? ?</td>
?? ??? ??? ?</tr>
?? ??? ?</table>
?? ?</body>
</html>

修改后的段落如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>tr{height: 60px;}td ,th{width: 150px;text-align: center;border: 1px solid red;}</style><script>function addNode(){var tab = document.getElementById ("tab");var tr = document.createElement("tr");var td = document.createElement("td");td.innerHTML = '<input type="Text"/ size="10px" οnblur="saveVal(this)" />';var td2 = document.createElement("td");td2.innerHTML = '<input type="Text" size="10px" οnblur="saveVal(this)" />';var td3 = document.createElement("td");td3.innerHTML = '<input type="button" value="添加" οnclick="addNode()" />'+'<input type="button" value="刪除" οnclick="removeNode(this)" />'+'<input type="button" value="修改" οnclick="editNode(this)" />'; // 添加修改按鈕tab.appendChild(tr);tr.appendChild(td);tr.appendChild(td2);tr.appendChild(td3);}function saveVal(thi){var td = thi.parentNode;td.innerText = thi.value;}function removeNode(abc){var tr = abc.parentNode.parentNode;tr.remove();}function editNode(btn) {var tr = btn.parentNode.parentNode;var tds = tr.getElementsByTagName('td');for (var i = 0; i < 2; i++) { // 前兩列是書名和價格var td = tds[i];var value = td.innerText;td.innerHTML = '<input type="Text" size="10px" value="' + value + '" οnblur="saveVal(this)" />';}}</script></head><body><table id="tab" border="1px" align="center"><tr><th>圖書名稱</th><th>圖書價格</th><th>操作</th></tr><tr><td>javaSE</td><td>19</td><td><input type="button" name="" id="" value="添加" οnclick="addNode()" /><input type="button" name="" id="" value="刪除" οnclick="removeNode(this)" /><input type="button" name="" id="" value="修改" οnclick="editNode(this)" /> <!-- 添加修改按鈕 --></td></tr><tr><td>javaEE</td><td>29</td><td><input type="button" name="" id="" value="添加" οnclick="addNode()" /><input type="button" name="" id="" value="刪除" οnclick="removeNode(this)" /><input type="button" name="" id="" value="修改" οnclick="editNode(this)" /> <!-- 添加修改按鈕 --></td></tr></table></body>
</html>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/898858.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/898858.shtml
英文地址，請注明出處：http://en.pswp.cn/news/898858.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！