javascript实现table选中的行以指定颜色高亮显示的方法_javascript技巧

本文实例讲述了javascript实现table选中的行以指定颜色高亮显示的方法。分享给大家供大家参考。具体实现方法如下:

<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) { //判断是不是当前选择的行
   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>联想</td>
  <td>DD</td>
</tr>
</table>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript
, table
, 高亮显示
, 选中的行
指定颜色
javascript 高亮显示、javascript 语法高亮、javascript 代码高亮、vim javascript 高亮、eclipse 选中变量高亮,以便于您获取更多的相关知识。

时间: 2024-07-28 18:52:17

javascript实现table选中的行以指定颜色高亮显示的方法_javascript技巧的相关文章

javascript实现table选中的行以指定颜色高亮显示

  本文实例讲述了javascript实现table选中的行以指定颜色高亮显示的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 <html xmlns="http://www.w3.org/1999/x

Javascript删除指定元素节点的方法_javascript技巧

在javascript操作dom树的时候可能会经常遇到增加,删除节点的事情,比如一个输入框后一个增加按钮,一个删除按钮,点击增加就增加 个输入框,点击删除就删除对应的输入框.在一些js框架,如Prototype中,可以用element.remove()来删除一个节点,核心JS中并 没有这样的方法,IE中有这样一个方法:removeNode(),尝试运行下面的代码 <div><input onclick="removeNode(this)" type="tex

JavaScript获得指定对象大小的方法_javascript技巧

本文实例讲述了JavaScript获得指定对象大小的方法.分享给大家供大家参考.具体如下: function objectSize(the_object) { /* function to validate the existence of each key in the object to get the number of valid keys. */ var object_size = 0; for (key in the_object){ if (the_object.hasOwnPro

javascript格式化指定日期对象的方法_javascript技巧

本文实例讲述了javascript格式化指定日期对象的方法.分享给大家供大家参考.具体如下: /* * 格式化Date对象为:"2015-04-17 10:20:00" * var dateObj = new Date(); */ function formartDate(dateObj){ var updatetimeval =dateObj.getFullYear()+"-"+(dateObj.getMonth()+1)+"-" +dateO

JavaScript比较当前时间是否在指定时间段内的方法_javascript技巧

本文实例讲述了JavaScript比较当前时间是否在指定时间段内的方法.分享给大家供大家参考,具体如下: function checkTime(stime, etime) { //开始时间 var arrs = stime.split("-"); var startTime = new Date(arrs[0], arrs[1], arrs[2]); var startTimes = startTime.getTime(); //结束时间 var arre = etime.split(

JavaScript获取指定元素位置的方法_javascript技巧

本文实例讲述了JavaScript获取指定元素位置的方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: function showpane() {   var self = document.getElementById("eID");   var left = self.getBoundingClientRect().left + document.documentElement.scrollLeft;   var top = self.getBoundingClientR

JS实现向表格行添加新单元格的方法_javascript技巧

本文实例讲述了JS实现向表格行添加新单元格的方法.分享给大家供大家参考.具体如下: 下面的JS代码可以想表格中指定id的行插入新的单元格 <!DOCTYPE html> <html> <head> <script> function insCell() { var x=document.getElementById('tr1').insertCell(0); x.innerHTML="The famous"; } </script&

javascript上下方向键控制表格行选中并高亮显示的方法_javascript技巧

本文实例讲述了javascript上下方向键控制表格行选中并高亮显示的方法.分享给大家供大家参考.具体实现方法如下: <style> tr.highlight { background:#08246B; color:white; } </style> <table border="1" width="70%" id="ice"> <tr onClick="selectTR();return fa

javascript实现可全选、反选及删除表格的方法_javascript技巧

本文实例讲述了javascript实现可全选.反选及删除表格的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu