快捷導(dǎo)航

簡單的js表格操作

更新時間：2016年09月24日 11:52:42 作者：湘湘_Saling

這篇文章主要為大家詳細介紹了簡單的js表格操作,具有一定的參考價值，感興趣的小伙伴們可以參考一下

效果圖：

任務(wù)：

1. 鼠標移到不同行上時背景色改為色值為 #f2f2f2，移開鼠標時則恢復(fù)為原背景色 #fff

var tr=document.getElementsByTagName("tr");
 for(var i= 0;i<tr.length;i++)
 {
 bgcChange(tr[i]);
 }
 // 鼠標移動改變背景,可以通過給每行綁定鼠標移上事件和鼠標移除事件來改變所在行背景色。
function bgcChange(obj)
 {
 obj.onmouseover=function(){
 obj.style.backgroundColor="#f2f2f2";
 }
 obj.onmouseout=function(){
 obj.style.backgroundColor="#fff";
 }
 }

2. 點擊添加按鈕，能動態(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+"位學生";
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. 點擊刪除按鈕，則刪除當前行

function del(obj)
 {
 var tr=obj.parentNode.parentNode;
 tr.parentNode.removeChild(tr);
 }

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
表格

相關(guān)文章

javascript跳轉(zhuǎn)與返回和刷新頁面的實例代碼
這篇文章主要介紹了javascript跳轉(zhuǎn)與返回和刷新頁面的實例代碼，簡單介紹了javascript中window.open()與window.location.href的區(qū)別，感興趣的朋友一起看看吧
2019-11-11
javascript實現(xiàn)密碼驗證
這篇文章主要介紹了javascript密碼驗證的實現(xiàn)方法，過程很簡單具有一定的參考價值，適合初學者學習研究，感興趣的小伙伴們可以參考一下
2015-11-11
JS 密碼強度驗證(兼容IE,火狐,谷歌)
仿JQuery中文社區(qū)注冊,JS 密碼強度驗證(兼容IE,火狐,谷歌)
2010-03-03
基于layui實現(xiàn)登錄頁面
這篇文章主要為大家詳細介紹了基于layui實現(xiàn)登錄頁面，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-11-11
前端JS工具類lodash的超詳細介紹
Lodash是一個一致性、模塊化、高性能的 JavaScript 實用工具庫,算是從分離出來的超集,這篇文章主要介紹了前端JS工具類lodash的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2025-04-04
JS實現(xiàn)給數(shù)組對象排序的方法分析
這篇文章主要介紹了JS實現(xiàn)給數(shù)組對象排序的方法,結(jié)合實例形式分析了javascript數(shù)組對象排序相關(guān)實現(xiàn)方法與操作注意事項,需要的朋友可以參考下
2019-06-06
Mint-UI時間組件起始時間問題及時間插件使用
這篇文章主要介紹了Mint-UI時間組件起始時間問題的解決方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-08-08
原生javascript制作貪吃蛇小游戲的方法分析
這篇文章主要介紹了原生javascript制作貪吃蛇小游戲的方法,結(jié)合具體實例形式分析了JavaScript實現(xiàn)貪吃蛇小游戲的具體步驟、功能實現(xiàn)、數(shù)值運算等相關(guān)操作技巧,需要的朋友可以參考下
2020-02-02
純css下拉菜單無需js
這篇文章主要為大家詳細介紹了純css下拉菜單代碼，無需js，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-08-08
Javascript模擬scroll滾動效果腳本
項目需要寫了一段模擬Scroll滾動代碼，分享的同時，我有些疑問，希望大家能幫忙解決，代碼如下
2008-09-09