排名練習：向表格添加資料，
1、當編號遇到重複給予提示並且無法添加，2、而且按排名順序添加資料，3、可以動態刪除和修改，並把修改資料儲存起來
新手們動起手來自己練習練習吧。。。。加深對JS中對象的理解。
參考代碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title>ggggg</title><link rel="stylesheet" type="text/css" href=""><meta http-equiv="content-type" content="text/html;charset=utf-8"><!--js代碼可以放置在任意位置，按照先後順序依次執行 一般放在head標籤之間--><script type="text/javascript"> /*插入資料*/ function insert(){ //獲得表格對象 var mytable=document.getElementById("table1"); //判斷插入是否重複的排名 //遍曆 //定義變數要插入的位置 var insertW=mytable.rows.length; for(var i=1;i<mytable.rows.length;i++){ //取出每一行 var eRows=mytable.rows[i]; //判斷輸入的排名是否重複 if(eRows.cells[0].innerText==no.value){ window.alert("與排名 "+eRows.cells[0].innerText+" 重複"); return ;//阻止代碼往下面執行 } //進行排序 尋找要插入的位置 if(parseInt(no.value)>parseInt(eRows.cells[0].innerText)){ insertW=i; //window.alert(insertW); } } //排序後的插入 var eachRow=mytable.insertRow(insertW+1); //每行添加資料 eachRow.insertCell(0).innerText=document.getElementById("no").value; eachRow.insertCell(1).innerText=username.value; eachRow.insertCell(2).innerText=nickname.value; eachRow.insertCell(3).innerHTML="<a href='#' onclick='deleteRow(this)'>刪除</a>"; eachRow.insertCell(4).innerHTML="<a href='#' onclick='updateRow(this)'>修改</a>"; } /*更新資料*/ function updateRow(obj){ //window.alert("ok"); var mytable=document.getElementById("table1"); //找到要修改的行 var index=obj.parentNode.parentNode.sectionRowIndex; mytable.rows[index].cells[1].innerHTML="<input type='text' id='username'/>"; mytable.rows[index].cells[2].innerHTML="<input type='text' id='nickname'/>"; mytable.rows[index].cells[3].innerText="刪除"; mytable.rows[index].cells[4].innerHTML="<a href='#' onclick='save(this)'>儲存</a>"; } /*更新後點擊儲存*/ function save(obj){ var mytable=document.getElementById("table1"); //找到要修改的行 var index=obj.parentNode.parentNode.sectionRowIndex; mytable.rows[index].cells[1].innerText=document.getElementById("username").value; mytable.rows[index].cells[2].innerText=document.getElementById("nickname").value; mytable.rows[index].cells[3].innerHTML="<a href='#' onclick='deleteRow(this)'>刪除</a>"; mytable.rows[index].cells[4].innerHTML="<a href='#' onclick='updateRow(this)'>修改</a>"; } /*刪除資料*/ function deleteRow(obj){ //window.alert("ok"); var mytable=document.getElementById("table1"); //找到當前列 //找到該刪除節點的父父節點<tr>並返回一個(TableRow 對象)，從而取得該行對應的行號 //window.alert(obj.parentNode.parentNode.sectionRowIndex); var index=obj.parentNode.parentNode.sectionRowIndex; var del=window.confirm("確定刪除"); if(del){ mytable.deleteRow(index); window.alert("刪除成功"); } }</script></head><body> <table id="table1" border="1"> <tr><td>排名</td><td>姓名</td><td>外號</td><td>刪除</td><td>修改</td></tr> <tr><td>1</td><td>宋江</td><td>及時雨</td><td><a href="#" onclick='deleteRow(this)'>刪除</a></td><td><a href="#" onclick="updateRow(this)">修改</a></td></tr> <tr><td>2</td><td>盧俊義</td><td>玉麒麟</td><td><a href="#" onclick='deleteRow(this)'>刪除</a></td><td><a href="#" onclick="updateRow(this)">修改</a></td></tr> <tr><td>10</td><td>test</td><td>test</td></td><td><a href="#" onclick='deleteRow(this)'>刪除</a></td><td><a href="#" onclick='updateRow(this)'>修改</a></td></tr> </table> <br/><br/> 排名:<input id="no" type="text" name="no"><br/> 姓名:<input id="username" type="text" name="username"><br/> 外號:<input id="nickname" type="text" name="nickname"><br/> <input type="button" value="添加" onclick="insert()"><br/></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
