基于javascipt-dom編程 table對(duì)象的使用
排名練習(xí)：向表格添加數(shù)據(jù)，當(dāng)編號(hào)遇到重復(fù)給予提示并且無(wú)法添加，而且按排名順序添加數(shù)據(jù)
參考代碼：
<!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代碼可以放置在任意位置，按照先后順序依次執(zhí)行 一般放在head標(biāo)簽之間-->
<script type="text/javascript">
function test(){
//獲得表格對(duì)象
var mytable=document.getElementById("table1");
//判斷插入是否重復(fù)的排名
//遍歷
//定義變量要插入的位置
var insertW=mytable.rows.length;
for(var i=1;i<mytable.rows.length;i++){
//取出每一行
var eRows=mytable.rows[i];
//判斷輸入的排名是否重復(fù)
if(eRows.cells[0].innerText==no.value){
window.alert("與排名 "+eRows.cells[0].innerText+" 重復(fù)");
return ;//阻止代碼往下面執(zhí)行
}
//進(jìn)行排序 查找要插入的位置
if(parseInt(no.value)>parseInt(eRows.cells[0].innerText)){
insertW=i;
//window.alert(insertW);
}
//window.alert("ok");
}
//排序后的插入
var eachRow=mytable.insertRow(insertW+1);
//每行添加數(shù)據(jù)
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>外號(hào)</td></tr>
<tr><td>1</td><td>宋江</td><td>及時(shí)雨</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/>
外號(hào):<input id="nickname" type="text" name="nickname"><br/>
<input type="button" value="添加" onclick="test()"><br/>
</body>
</html>
相關(guān)文章
Ajax解決跨域之設(shè)置CORS響應(yīng)頭實(shí)現(xiàn)跨域案例詳解
這篇文章主要介紹了Ajax解決跨域之設(shè)置CORS響應(yīng)頭實(shí)現(xiàn)跨域案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-07-07
js的參數(shù)有長(zhǎng)度限制嗎？發(fā)現(xiàn)不能超過(guò)2083個(gè)字符
用substring大致對(duì)入口參數(shù)的值處理了一下，發(fā)現(xiàn)不能超過(guò)2083個(gè)字符。難道js的函數(shù)參數(shù)有長(zhǎng)度限制2014-04-04
JavaScript中的Repaint和Reflow用法詳解
這篇文章主要介紹了JavaScript中的Repaint和Reflow用法詳解,是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-07-07
javascript基礎(chǔ)知識(shí)大集錦(二) 推薦收藏
正則表達(dá)式 call(),apply(),callee,caller,cookie方法，setInterval()，clearInterval(),setTimeout() ,clearTimeout()2011-01-01
js對(duì)象關(guān)系圖 方便dom操作，需要的朋友可以參考下。都是常用的一些屬性。2012-03-03
JavaScript CSS修改學(xué)習(xí)第三章 修改樣式表
在這一章我打算通過(guò)直接修改頁(yè)面的樣式表而不是通過(guò)訪問(wèn)元素的辦法來(lái)修改PRE的背景顏色。不幸的是，瀏覽器嚴(yán)重的不兼容性讓這個(gè)代碼基本上不能使用。2010-02-02
這篇文章主要介紹了js閉包理解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
JavaScript中匿名函數(shù)的用法及優(yōu)缺點(diǎn)詳解
下面小編就為大家?guī)?lái)一篇JavaScript中匿名函數(shù)的用法及優(yōu)缺點(diǎn)詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
JavaScript中用getDate()方法返回指定日期的教程
這篇文章主要介紹了JavaScript中用getDate()方法返回指定日期的教程,是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
這篇文章主要介紹了javascript中eval解析JSON字符串時(shí)遇到的一個(gè)問(wèn)題，簡(jiǎn)單的說(shuō)eval就相當(dāng)于一個(gè)js解析器，很牛哦2016-02-02