排名練習:向表格添加數據,當編號遇到重復給予提示並且無法添加,而且按排名順序添加數據
參考代碼:
復制代碼 代碼如下:
<!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 test(){
//獲得表格對象
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);
}
//window.alert("ok");
}
//排序後的插入
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;
}
</script>
</head>
<body>
<table id="table1" border="1">
<tr><td>排名</td><td>姓名</td><td>外號</td></tr>
<tr><td>1</td><td>宋江</td><td>及時雨</td></tr>
<tr><td>2</td><td>盧俊義</td><td>玉麒麟</td></tr>
<tr><td>10</td><td>test</td><td>test</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="test()"><br/>
</body>
</html>