Home > Web Front-end > JS Tutorial > How to use javascript to highlight selected rows in a table with a specified color_javascript skills

How to use javascript to highlight selected rows in a table with a specified color_javascript skills

WBOY
Release: 2016-05-16 15:59:26
Original
1356 people have browsed it

The example in this article describes the method of using JavaScript to highlight selected rows in a table with a specified color. Share it with everyone for your reference. The specific implementation method is as follows:

<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>
Copy after login

I hope this article will be helpful to everyone’s JavaScript programming design.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template