簡(jiǎn)單的js表格操作
效果圖:
任務(wù):
1. 鼠標(biāo)移到不同行上時(shí)背景色改為色值為 #f2f2f2,移開鼠標(biāo)時(shí)則恢復(fù)為原背景色 #fff
var tr=document.getElementsByTagName("tr"); for(var i= 0;i<tr.length;i++) { bgcChange(tr[i]); } // 鼠標(biāo)移動(dòng)改變背景,可以通過(guò)給每行綁定鼠標(biāo)移上事件和鼠標(biāo)移除事件來(lái)改變所在行背景色。 function bgcChange(obj) { obj.onmouseover=function(){ obj.style.backgroundColor="#f2f2f2"; } obj.onmouseout=function(){ obj.style.backgroundColor="#fff"; } }
2. 點(diǎn)擊添加按鈕,能動(dòng)態(tài)在最后添加一行
var num=2; function add(){ num++; var tr=document.createElement("tr"); var xh=document.createElement("td"); var xm=document.createElement("td"); xh.innerHTML="xh00"+num; xm.innerHTML="第"+num+"位學(xué)生"; var del=document.createElement("td"); del.innerHTML="<a href='javascript:;' onclick='del(this)' >刪除</a>"; var tab=document.getElementById("table"); tab.appendChild(tr); tr.appendChild(xh); tr.appendChild(xm); tr.appendChild(del); var tr = document.getElementsByTagName("tr"); for(var i= 0;i<tr.length;i++) { bgcChange(tr[i]); } }
3. 點(diǎn)擊刪除按鈕,則刪除當(dāng)前行
function del(obj) { var tr=obj.parentNode.parentNode; tr.parentNode.removeChild(tr); }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js下為表格內(nèi)部動(dòng)態(tài)添加行的代碼
- javascript動(dòng)態(tài)添加表格數(shù)據(jù)行(ASP后臺(tái)數(shù)據(jù)庫(kù)保存例子)
- javascript 動(dòng)態(tài)添加表格行
- js生成動(dòng)態(tài)表格并為每個(gè)單元格添加單擊事件的方法
- 動(dòng)態(tài)添加刪除表格行的js實(shí)現(xiàn)代碼
- js在不刷新的情況下動(dòng)態(tài)添加表格行[腳本之家強(qiáng)烈推薦]
- javascript如何動(dòng)態(tài)加載表格與動(dòng)態(tài)添加表格行
- js動(dòng)態(tài)添加表格數(shù)據(jù)使用insertRow和insertCell實(shí)現(xiàn)
- javascript動(dòng)態(tài)向網(wǎng)頁(yè)中添加表格實(shí)現(xiàn)代碼
- 原生JS操作網(wǎng)頁(yè)給p元素添加onclick事件及表格隔行變色
相關(guān)文章
javascript forEach函數(shù)實(shí)現(xiàn)代碼
在Base2中找到一個(gè)叫forEach的函數(shù),是我見過(guò)的最好的實(shí)現(xiàn)。挖出來(lái)分析一下。它能對(duì)各種普通對(duì)象,字符串,數(shù)組以及類數(shù)組進(jìn)行遍歷。如果原游覽器的對(duì)象已實(shí)現(xiàn)此函數(shù),它則調(diào)用原對(duì)象的函數(shù)。2010-01-01HTML頁(yè)面滾動(dòng)時(shí)獲取離頁(yè)面頂部的距離2種實(shí)現(xiàn)方法
獲取離滾動(dòng)頁(yè)面的頂部距離有兩種方法一是DOM;而是jquery,具體的實(shí)現(xiàn)如下,感興趣的朋友可以嘗試操作下2013-09-09JavaScript隊(duì)列的應(yīng)用實(shí)例詳解【經(jīng)典數(shù)據(jù)結(jié)構(gòu)】
這篇文章主要介紹了JavaScript隊(duì)列的應(yīng)用,簡(jiǎn)單講述了隊(duì)列的概念并結(jié)合實(shí)例形式分析了基于javascript隊(duì)列排隊(duì)問(wèn)題解決方法,需要的朋友可以參考下2017-04-04JavaScript實(shí)現(xiàn)雙向鏈表過(guò)程解析
這篇文章主要介紹了利用JavaScript實(shí)現(xiàn)雙向鏈表以及它的封裝和常用操作,文中的示例代碼講解詳細(xì),對(duì)日常的學(xué)習(xí)和工作都有一定的價(jià)值,快來(lái)和小編一起學(xué)習(xí)吧2021-12-12Javascript中內(nèi)建函數(shù)reduce的應(yīng)用詳解
內(nèi)建函數(shù)其實(shí)就是內(nèi)置函數(shù),reduce函數(shù)是ECMAScript5規(guī)范中出現(xiàn)的數(shù)組方法。在平時(shí)的工作中,相信大家使用的場(chǎng)景并不多,這篇文章給大家詳細(xì)介紹了函數(shù)reduce的應(yīng)用以及多重疊加,有需要的朋友們可以參考借鑒,下面來(lái)一起看看吧。2016-10-10js 判斷瀏覽器類型 去全角、半角空格 自動(dòng)關(guān)閉當(dāng)前窗口
去全角、半角空格 自動(dòng)關(guān)閉當(dāng)前窗口等實(shí)現(xiàn)函數(shù)。2009-04-04再也不怕 JavaScript 報(bào)錯(cuò)了,怎么看怎么處理都在這兒
這篇文章主要介紹了再也不怕 JavaScript 報(bào)錯(cuò)了,怎么看怎么處理都在這兒,需要的朋友可以參考下2020-12-12