`
ayaya
  • 浏览: 453749 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

javascript行选择

JavaScriptCC++C# 
阅读更多 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test</title>

<script>
	var varclk=null;
	function change1(varid,val)
	{
		if(varclk!=null)
		{
			var e1=eval("document.all.td"+varclk);
			for(i=0;i<e1.length;i++)
			{
				e1[i].style.background='#fff';
			}
		}
		varclk=varid;
		var e=eval("document.all.td"+varid);
		for(i=0;i<e.length;i++)
		{
			e[i].style.background='#BCBAFA';
		}
		alert(val);
	}
</script>
</head>
<body>
<table width="300" border="1">
  <tr onClick="change1(1,1)">
    <td id="td1">a</td>
    <td id="td1">b</td>
    <td id="td1">c</td>
    <td id="td1">d</td>
    <td id="td1">e</td>
  </tr>
  <tr onClick="change1(2,21)">
    <td id="td2">a</td>
    <td id="td2">b</td>
    <td id="td2">c</td>
    <td id="td2">e</td>
    <td id="td2">d</td>
  </tr>
    <tr onClick="change1(3,23)">
    <td id="td3">a</td>
    <td id="td3">b</td>
    <td id="td3">c</td>
    <td id="td3">e</td>
    <td id="td3">d</td>
  </tr>
</table>
</body>
</html>


下段代码没有好地解决办法，处理tr间隔行的问题 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test</title>
<style>
	tr{
		background:expression(this.rowIndex%2==0 ? "red":"#fff");
		} 

	</style>
<script>
	var varclk=null;
	function change1(varid,val)
	{
		if(varclk!=null)
		{
			var e1=eval("document.all.td"+varclk);
			for(i=0;i<e1.length;i++)
			{
				e1[i].style.background="red";
			}
		}
		varclk=varid;
		var e=eval("document.all.td"+varid);
		for(i=0;i<e.length;i++)
		{
			e[i].style.background='#BCBAFA';
		}
		//alert(val);
	}
</script>
</head>
<body>
<table width="300" border="1">
  <tr onClick="change1(1,1)">
    <td id="td1">a</td>
    <td id="td1">b</td>
    <td id="td1">c</td>
    <td id="td1">d</td>
    <td id="td1">e</td>
  </tr>
  <tr onClick="change1(2,21)">
    <td id="td2">a</td>
    <td id="td2">b</td>
    <td id="td2">c</td>
    <td id="td2">e</td>
    <td id="td2">d</td>
  </tr>
    <tr onClick="change1(3,23)">
    <td id="td3">a</td>
    <td id="td3">b</td>
    <td id="td3">c</td>
    <td id="td3">e</td>
    <td id="td3">d</td>
  </tr>
</table>
</body>
</html>


解决方式： 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test</title>
<style>
tr {
	background-color:expression((this.sectionRowIndex%2==0)?"#F3F9FE":"#fff")
}
</style>
<script>
	var varclk=null;
	var oldcolor=null;
	function change1(vartr)
	{
		if(varclk!=null)
		{
			varclk.style.backgroundColor=oldcolor;
		}
		oldcolor=vartr.style.backgroundColor;
		vartr.style.backgroundColor='green';
		varclk=vartr;
	}
</script>
</head>
<body>
<table width="300" border="1">
  <tr onClick="change1(this)">
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
    <td>e</td>
  </tr>
  <tr onClick="change1(this)">
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>e</td>
    <td>d</td>
  </tr>
    <tr onClick="change1(this)">
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>e</td>
    <td>d</td>
  </tr>
</table>
</body>
</html>


变换文字颜色 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test</title>
<style>
tr {
	background-color:expression((this.sectionRowIndex%2==0)?"#935645":"#fff")
}
</style>
<script>
	var varclk=null;
	var oldcolor=null;
	function change1(vartr)
	{
		if(varclk!=null)
		{
			varclk.style.backgroundColor=oldcolor;
			varclk.style.color="black";
		}
		oldcolor=vartr.style.backgroundColor;
		vartr.style.backgroundColor='#456';
		vartr.style.color="red";
		varclk=vartr;
	}
</script>
</head>
<body>
<table width="600" border="0">
  <tr onClick="change1(this)">
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
    <td>e</td>
  </tr>
  <tr onClick="change1(this)">
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>e</td>
    <td>d</td>
  </tr>
    <tr onClick="change1(this)">
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>e</td>
    <td>d</td>
  </tr>
</table>
</body>
</html>
分享到：
| 使用Eclipse创建模板并格式化代码
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript实现日期选择

    ### JavaScript 实现日期选择 #### 知识点概述 本文将详细介绍如何利用JavaScript来实现一个功能强大的日期选择器。此日期选择器不仅包含了基础的日期显示功能，还提供了丰富的自定义选项，例如添加指定时间间隔、...

    javascript table 增加删除行,巧妙实现

    在JavaScript中，表格（Table）是网页数据展示的常用元素，而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先，我们需要了解HTML中的`&lt;table&gt;`元素及其相关...

    纯javascript增加删除表格行

    3. **删除行**：删除表格行通常涉及到选择要删除的行，并调用`removeChild()`方法。例如，假设我们想删除点击时的当前行，可以这样实现： ```javascript function deleteRow(event) { if (confirm('确定要删除...

    JSP 颜色选择器 javascript

    标题中的"一句话进行颜色选择器的初始化"意味着开发者只需要一行JavaScript代码就能在页面上启用这个颜色选择器。这大大简化了集成过程，提高了开发效率。通常，这样的初始化代码可能类似于`new ColorPicker...

    javascript动态操作表格

    总的来说，JavaScript动态操作表格涉及创建、删除、选择和更新表格元素，这些都需要对DOM有深入理解。在实际应用中，还要考虑浏览器兼容性，特别是对于较旧的浏览器，如IE6和早期的Firefox版本。通过合理使用...

    JavaScript+jQuery实现途乐行（旅游型）htm页面

    例如，当用户选择不同的旅游目的地时，JavaScript可以动态加载并显示相关的旅游信息，无需重新加载整个页面。此外，JavaScript还可以用于实现动画效果，提升用户体验。 jQuery是一个流行的JavaScript库，它简化了...

    几个经典JavaScript控件

    JavaScript可以用于创建、修改、删除表格行、列，以及对表格数据进行排序、过滤和搜索。例如，`jQuery DataTables` 是一个流行的库，它提供了强大的表格功能，如分页、排序、过滤等。 2. **选择控件（Choice）**： ...

    精通JavaScript.pdf

    jQuery的核心特性包括选择器（用于查找HTML元素）、效果（如淡入淡出）和AJAX操作，使得这些复杂的任务变得简单易行。 在提供的文件"精通JavaScript.jQuery.pdf"中，我们可以期待找到关于JavaScript深入理解和使用...

    jquery表格插件及JavaScript选择框

    在本案例中，我们将探讨如何使用jQuery插件Datatables来改进表格，并结合JavaScript的选择框技术提升用户体验。 Datatables是一款强大的开源jQuery插件，它能够将普通的HTML表格转变为功能丰富的数据展示工具。...

    JavaScript 案例教程源码

    5. **事件与DOM操作**：讲解如何通过JavaScript操作网页文档对象模型（DOM），包括元素选择、添加删除、样式修改，以及事件监听和处理。 6. **异步编程**：介绍回调函数、Promise和async/await，帮助你理解和解决...

    javascript改变表格行的颜色

    ### JavaScript 改变表格行颜色的方法 在网页开发中，使用JavaScript来动态改变表格行的颜色是一种常见的技术。这种技术不仅可以提升用户体验，还可以增加网站的交互性。本文将详细介绍如何使用JavaScript来实现这...

    Javascript压缩工具，JsMinGUI

    在使用JsMinGUI时，你可以通过其直观的界面拖放或选择需要压缩的JavaScript文件。工具会自动处理源代码，去除所有非必要的字符，如多行注释、单行注释以及大部分形式的空白。这不仅包括空格，还包括制表符和换行符。...

    IE中调试javascript

    当IE执行到这一行时，将自动打开调试窗口。这种方法需要开发者事先知道哪些代码片段可能存在潜在的问题，因此通常需要结合其他工具（如IEDeveloperToolbar）来定位具体的调试位置。 #### 五、应用示例 假设有一个...

    eclipse 集成javascript调试插件

    在创建新的项目时，选择"Web"类别下的"Dynamic Web Project"，然后在项目的"Web Content"目录下添加JavaScript文件。 对于调试JavaScript，Eclipse使用的是其内置的Debug Perspective。要启动JavaScript调试，你...

    JavaScript日期时间选择控件

    JavaScript日期时间选择控件，可随意选择实用日期，日期小时，日期小时分钟。直接放在要用的地方就行了，调用非常简单。你一看就动，只要知道简单的HTML标记，就可以自己改动。这里是一个HTML网页，打开看里面的源...

    javascript常见的7个框架

    原先用 20 行代码完成的功能，jQuery 用 10 行就可以轻松搞定。 4. MooTools MooTools 是一个简洁、模块化、面向对象的 JavaScript 框架。它能够帮助您更快、更简单地编写可扩展和兼容性强的 JavaScript 代码。...

    JavaScript 中各种特效 源码

    学习如何通过JavaScript选择元素、添加或删除属性、改变样式以及添加或移除节点，这些都是实现特效的关键。 3. **事件处理**：JavaScript中的事件监听和处理是实现动态效果的核心。例如，鼠标的点击、移动，或者...

    javascript代码压缩工具

    在这个过程中，JavaScript代码压缩工具通过删除不必要的空格、换行符、注释以及使用变量简写等方式来实现代码的最小化。本文将详细介绍一种名为"jsMinifier"的JavaScript压缩工具，它需要在运行时安装JAVA环境。 **...

    ExtJs Grid选择行

    在ExtJs框架中，Grid组件是一种非常常用的展示数据表格的方式，它提供了丰富的功能，包括数据的排序、分页、过滤以及行选择等。在实际应用中，经常需要根据用户交互来判断Grid中的行是否被选中，以便进行下一步的...

Magicbox
Global site tag (gtag.js) - Google Analytics