table對(duì)象中的insertRow與deleteRow使用示例
更新時(shí)間：2014年01月26日 15:54:31 作者：
本文為大家介紹下table對(duì)象insertRow deleteRow的使用示例，適合新手朋友們
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<title>table1.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script language = "javascript" type = "text/javascript">
<!--
function test1(){
//判斷插入的編號(hào)是否已經(jīng)存在
for(var i=0;i<mytable.rows.length;i++){
var eachRow = mytable.rows[i];
if(eachRow.cells[0].innerText == no.value){
window.alert("編號(hào)已經(jīng)存在！");
return ;
}
}
//獲取表單中的數(shù)據(jù)
var newTableRow = mytable.insertRow(mytable.rows.length);
newTableRow.insertCell(0).innerText = no.value;
newTableRow.insertCell(1).innerText = name1.value;
newTableRow.insertCell(2).innerText = nickName.value;
}
function test2(){
mytable.deleteRow(mytable.rows.length-1);
}
//-->
</script>
</head>
<body>
<h1>英雄排行榜</h1>
<table id = "mytable" 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>
</table>
<h1>請(qǐng)輸入新的好漢</h1>
編號(hào)<input id = "no" type = "text" value = ""><br/>
名字<input id = "name1" type = "text" value = ""><br/>
外號(hào)<input id = "nickName" type = "text" value = ""><br/>
<input id = "tianjia" type = "button" value = "添加" onclick = "test1()">
<input type = "button" value = "刪除最后一行" onclick = "test2()"/>
</body>
</html>
相關(guān)文章
微信小程序模板消息限制實(shí)現(xiàn)無限制主動(dòng)推送的示例代碼
這篇文章主要介紹了微信小程序模板消息限制實(shí)現(xiàn)無限制主動(dòng)推送的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
一個(gè)JavaScript用逗號(hào)分割字符串實(shí)例
分割字符串的方法有很多，這篇文章主要介紹了一個(gè)JavaScript用逗號(hào)分割字符串實(shí)例，需要的朋友可以參考下2014-09-09
在寫一些關(guān)于圖片操作的代碼的時(shí)候，一般都需要在圖片加載完成之后再執(zhí)行程序。然而在Chorme中（貌似Safari也是）對(duì)window.onload的理解與IE和FF有偏差。2010-03-03
詳解JavaScript面向?qū)ο髮?shí)戰(zhàn)之封裝拖拽對(duì)象
本文主要介紹了JavaScript如何用面向?qū)ο蟮姆绞椒庋b拖拽對(duì)象，通過3種方式來實(shí)現(xiàn)，幫助讀者更好的理解其原理2021-06-06
JavaScript實(shí)現(xiàn)移動(dòng)端輪播效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)移動(dòng)端輪播效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
理解Javascript_08_函數(shù)對(duì)象
如果你無法理解博文在講什么，請(qǐng)回顧前面的系列博文。文章比較深入，如有不對(duì)之處，望請(qǐng)指正，謝謝。2010-10-10
JSChart能夠在網(wǎng)頁上生成圖標(biāo)，常用于統(tǒng)計(jì)信息，十分好用的一個(gè)JS組件。這篇文章主要介紹了JsChart組件使用詳解,需要的朋友可以參考下2018-03-03
JavaScript實(shí)現(xiàn)下拉列表選擇框
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)下拉列表選擇框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
今天小編就為大家分享一篇關(guān)于js中的reduce()函數(shù)講解，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
js實(shí)現(xiàn)帶緩動(dòng)動(dòng)畫的導(dǎo)航欄效果
本篇文章主要分享了js實(shí)現(xiàn)帶緩動(dòng)動(dòng)畫的導(dǎo)航欄效果的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01