快捷導(dǎo)航

javascript實現(xiàn)table選中的行以指定顏色高亮顯示的方法

更新時間：2015年05月13日 15:25:35 作者：永遠(yuǎn)愛好寫程序

這篇文章主要介紹了javascript實現(xiàn)table選中的行以指定顏色高亮顯示的方法,實例分析了javascript操作table表格元素與相關(guān)樣式的技巧,需要的朋友可以參考下

本文實例講述了javascript實現(xiàn)table選中的行以指定顏色高亮顯示的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table選中的行以指定顏色高亮顯示</title>
<script type="text/javascript">
function IniEvent() {
  var tbl = document.getElementById("tblMain");
  var trs = tbl.getElementsByTagName("tr");
  for (var i = 0; i < trs.length; i++) {
 trs[i].onclick = TrOnClick;
  }
}
function TrOnClick() {
  var tbl = document.getElementById("tblMain");
  var trs = tbl.getElementsByTagName("tr");
  for (var i = 0; i < trs.length; i++) {
 if (trs[i] == this) { //判斷是不是當(dāng)前選擇的行
   trs[i].style.background = "yellow";
 }
 else {
   trs[i].style.background = "white";
 }
  }
}
</script>
</head>
<body onload="IniEvent()">
<table id="tblMain" border="1">
<tr>
  <td>1</td>
  <td>三星</td>
  <td>AA</td>
</tr>
<tr>
  <td>2</td>
  <td>Norkia</td>
  <td>BB</td>
</tr>
<tr>
  <td>3</td>
  <td>蘋果</td>
  <td>CC</td>
</tr>
<tr>
  <td>4</td>
  <td>聯(lián)想</td>
  <td>DD</td>
</tr>
</table>
</body>
</html>

希望本文所述對大家的javascript程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

asp.net下利用js實現(xiàn)返回上一頁的實現(xiàn)方法小集
其實要實現(xiàn)這個功能主要還是要用到j(luò)avascript
2009-11-11
淺析JavaScript中變量提升的原理與使用
前端的小伙伴大概都知道，js中的var變量存在變量提升，在es6以后隨著let變量的出現(xiàn)，變量提升問題得以解決，那么變量提升的原理是什么，es6又是怎么解決變量提升問題的，下面我們來共同探尋答案
2023-05-05
點擊A元素觸發(fā)B元素的事件在IE8下會識別成A元素
IE8自動觸發(fā)的事件源會識別成手動點擊的元素就是點擊A元素觸發(fā)B元素的事件在IE8下會識別成A元素,需要的朋友可以參考下
2014-09-09
JavaScript控制網(wǎng)頁平滑滾動到指定元素位置的方法
這篇文章主要介紹了JavaScript控制網(wǎng)頁平滑滾動到指定元素位置的方法,實例分析了javascript操作頁面滾動的技巧,非常具有實用價值,需要的朋友可以參考下
2015-04-04
Js之如何移除Array/數(shù)組中指定元素
這篇文章主要介紹了Js之如何移除Array/數(shù)組中指定元素問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03
在JavaScript中調(diào)用Java類和接口的方法
這篇文章主要講述如何在JavaScript腳本語言中調(diào)用Java類和接口，對大家的學(xué)習(xí)和工作有一定的參考借鑒價值，有需要的朋友們下面來一起看看吧。
2016-09-09
javascript如何返回字符串的所有排列
這篇文章主要介紹了javascript如何返回字符串的所有排列問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
原生JS封裝ajax 傳json，str，excel文件上傳提交表單(推薦)
這篇文章主要介紹了原生JS封裝ajax 傳json，str，excel文件上傳提交表單(推薦)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-06-06
關(guān)于UTF-8的客戶端用AJAX方式獲取GB2312的服務(wù)器端亂碼問題的解決辦法
客戶端是UTF-8編碼，這也是現(xiàn)在大家公認(rèn)的標(biāo)準(zhǔn)編碼在這種情況下，實用AJAX異步獲取GB2312編碼的服務(wù)器端信息時，不可避免的要遇到漢字亂碼問題
2010-11-11
微信小程序中wxs文件的一些妙用分享
wxs相當(dāng)于一個獨立模塊,相當(dāng)于一個獨立出來的module對象,通過module.exports向外暴露,在文件中引入即可使用,下面這篇文章主要給大家介紹了關(guān)于微信小程序中wxs文件的一些妙用,需要的朋友可以參考下
2022-01-01