点击table单元格改变原有背景图,再点击还原的问题,等高手

aykkk 2011-11-26 02:52:57
我在网上找了一段代码,如下:
<table width="42" height="12" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="14" height="12" background="img/1.gif" onclick= "this.background=this.background=='img/2.gif'?'img/1.gif':'img/2.gif'"> </td>
<td width="14" height="12" background="img/1.gif" onclick= "this.background=this.background=='img/2.gif'?'img/1.gif':'img/2.gif'"> </td>
<td width="14" height="12" background="img/1.gif" onclick= "this.background=this.background=='img/2.gif'?'img/1.gif':'img/2.gif'"> </td>
</tr>
</table>
经测试在ie中正常,在ff中不能达到目的,如何能让上面的代码兼容ie,ff?另外如何使用jquery达到相同的目的?
坐等高手指导.
...全文
166 13 打赏 收藏 转发到动态 举报
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
aykkk 2011-11-26
  • 打赏
  • 举报
 回复
呵呵,应该把if(tds[i].className == 'no_back')continue;
改成if(tds[i].className != 'no_back')continue;
谢谢了,结贴了
MuBeiBei 2011-11-26
  • 打赏
  • 举报
 回复
[Quote=引用 11 楼 aykkk 的回复:]

我说的不是最后一个单元格,是最后一行单元格,比如
<table width="42" height="12" border="1" cellpadding="0" cellspacing="0">
循环开始
<tr>
<td width="14" height="12" ><%#eval("a")</td>
<td width="14" height="12" ><%#eva……
[/Quote]

那你就给你这最后一行的td加上 class="no_back"
aykkk 2011-11-26
  • 打赏
  • 举报
 回复
我说的不是最后一个单元格,是最后一行单元格,比如
<table width="42" height="12" border="1" cellpadding="0" cellspacing="0">
循环开始
<tr>
<td width="14" height="12" ><%#eval("a")</td>
<td width="14" height="12" ><%#eval("x")</td>
<td width="14" height="12" ><%#eval("c")</td>
</tr>
循环结束
<tr>
<td width="14" height="12" style="background-image:url(img/1.gif);"> </td>
<td width="14" height="12" style="background-image:url(img/1.gif)"> </td>
<td width="14" height="12" style="background-image:url(img/1.gif)"> </td>
</tr>
</table>
这样的
MuBeiBei 2011-11-26
  • 打赏
  • 举报
 回复
<table width="42" height="12" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="14" height="12" style="background-image:url(img/1.gif);"> </td>
<td width="14" height="12" style="background-image:url(img/1.gif)"> </td>
<td width="14" height="12" style="background-image:url(img/1.gif)"> </td>
<td class="no_back">静态td,不加onclick事件</td>
</tr>
</table>

<script>
var tds = document.getElementsByTagName('td');

for(var i = 0; i < tds.length; i++){
if(tds[i].className == 'no_back')continue;
tds[i].onclick = function(){
if(document.all){
if(this.style.backgroundImage == 'url(img/2.gif)'){
this.style.backgroundImage = 'url(img/1.gif)';
}else{
this.style.backgroundImage = 'url(img/2.gif)';
}
}else{
if(this.style.backgroundImage == 'url("img/2.gif")'){
this.style.backgroundImage = 'url("img/1.gif")';
}else{
this.style.backgroundImage = 'url("img/2.gif")';
}
}
};
}
</script>
MuBeiBei 2011-11-26
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 aykkk 的回复:]

多谢大神,好使,不过问题又来了,我的表格中的数据由数据库中提取,根据条件不同,取出的数量也不同,比如30条,50条等等,我现在只希望在表格的最后一行执行这个操作,其他行不响应,如何办到.你看这样行不行,我把最后一行写成静态硬编码,并且给这一行的<tr>赋予一个ID,然后把这行代码
var tds = document.getElementsByTagName('td');
改成
var t……
[/Quote]

var tds = document.getElementsByTagName('td');就用这个就行

你给最后的静态td加个class

然后循环里面做个判断

如果td.className == '静态的TD class'就continue
aykkk 2011-11-26
  • 打赏
  • 举报
 回复
多谢大神,好使,不过问题又来了,我的表格中的数据由数据库中提取,根据条件不同,取出的数量也不同,比如30条,50条等等,我现在只希望在表格的最后一行执行这个操作,其他行不响应,如何办到.你看这样行不行,我把最后一行写成静态硬编码,并且给这一行的<tr>赋予一个ID,然后把这行代码
var tds = document.getElementsByTagName('td');
改成
var tds = document.getElementsByTagName('TR#ID td');
这样行不行?
MuBeiBei 2011-11-26
  • 打赏
  • 举报
 回复 
	<table width="42" height="12" border="1" cellpadding="0" cellspacing="0">

  <tr>

  <td width="14" height="12" style="background-image:url(img/1.gif);"> </td>

  <td width="14" height="12" style="background-image:url(img/1.gif)"> </td>

  <td width="14" height="12" style="background-image:url(img/1.gif)"> </td>

  </tr>

</table>



<script>

	var tds = document.getElementsByTagName('td');

	

	for(var i = 0; i < tds.length; i++){

		tds[i].onclick = function(){

			if(document.all){

				if(this.style.backgroundImage == 'url(img/2.gif)'){

					this.style.backgroundImage = 'url(img/1.gif)';

				}else{

					this.style.backgroundImage = 'url(img/2.gif)';	

				}

			}else{

				if(this.style.backgroundImage == 'url("img/2.gif")'){

					this.style.backgroundImage = 'url("img/1.gif")';

				}else{

					this.style.backgroundImage = 'url("img/2.gif")';

				}	

			}

		};	

	}

</script>
MuBeiBei 2011-11-26
  • 打赏
  • 举报
 回复
td里面的onclick事件 可以删掉了~·
MuBeiBei 2011-11-26
  • 打赏
  • 举报
 回复 
	<table width="42" height="12" border="1" cellpadding="0" cellspacing="0">

  <tr>

  <td width="14" height="12" style="background-image:url(img/1.gif);" onclick= "this.style.background=this.style.backgroundImage=='url(img/2.gif)'?'url(img/1.gif)':'url(img/2.gif)'"> </td>

  <td width="14" height="12" style="background-image:url(img/1.gif)" onclick= "this.style.background=this.style.backgroundImage=='url(img/2.gif)'?'url(img/1.gif)':'url(img/2.gif)'"> </td>

  <td id="a" width="14" height="12" style="background-image:url(img/1.gif)" onclick= "this.style.background=this.style.backgroundImage=='url(img/2.gif)'?'url(img/1.gif)':'url(img/2.gif)'"> </td>

  </tr>

</table>



<script>

	var tds = document.getElementsByTagName('td');

	

	for(var i = 0; i < tds.length; i++){

		tds[i].onclick = function(){

			if(document.all){

				if(this.style.backgroundImage == 'url(img/2.gif)'){

					this.style.backgroundImage = 'url(img/1.gif)';

				}else{

					this.style.backgroundImage = 'url(img/2.gif)';	

				}

			}else{

				if(this.style.backgroundImage == 'url("img/2.gif")'){

					this.style.backgroundImage = 'url("img/1.gif")';

				}else{

					this.style.backgroundImage = 'url("img/2.gif")';	

				}	

			}

		};	

	}

</script>



用这个
aykkk 2011-11-26
  • 打赏
  • 举报
 回复
如果换成如下代码
<table width="42" height="12" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="14" height="12" style="background:url(img/1.gif)" onclick= "this.style.background=this.style.background=='url(img/2.gif)'?'url(img/1.gif)':'url(img/2.gif)'"> </td>
<td width="14" height="12" style="background:url(img/1.gif)" onclick= "this.style.background=this.style.background=='url(img/2.gif)'?'url(img/1.gif)':'url(img/2.gif)'"> </td>
<td width="14" height="12" style="background:url(img/1.gif)" onclick= "this.style.background=this.style.background=='url(img/2.gif)'?'url(img/1.gif)':'url(img/2.gif)'"> </td>
</tr>
</table>
则IE中有效了,FF中第一点击有效,再点击无法还原
aykkk 2011-11-26
  • 打赏
  • 举报
 回复
大神,用了您的代码,在ie中点击背景图消失,再点击不还原,FF中仍然无效
MuBeiBei 2011-11-26
  • 打赏
  • 举报
 回复 
<table width="42" height="12" border="0" cellpadding="0" cellspacing="0">

  <tr>

  <td width="14" height="12" style="background:url(img/1.gif)" onclick= "this.style.background=this.style.background=='img/2.gif'?'img/1.gif':'img/2.gif'"> </td>

  <td width="14" height="12" style="background:url(img/1.gif)" onclick= "this.style.background=this.style.background=='img/2.gif'?'img/1.gif':'img/2.gif'"> </td>

  <td width="14" height="12" style="background:url(img/1.gif)" onclick= "this.style.background=this.style.background=='img/2.gif'?'img/1.gif':'img/2.gif'"> </td>

  </tr>

</table>



用这个 我之前发的错了
MuBeiBei 2011-11-26
  • 打赏
  • 举报
 回复 
<table width="42" height="12" border="0" cellpadding="0" cellspacing="0">

  <tr>

  <td width="14" height="12" background="img/1.gif" onclick= "this.style.background=this.style.background=='img/2.gif'?'img/1.gif':'img/2.gif'"> </td>

  <td width="14" height="12" background="img/1.gif" onclick= "this.style.background=this.style.background=='img/2.gif'?'img/1.gif':'img/2.gif'"> </td>

  <td width="14" height="12" background="img/1.gif" onclick= "this.style.background=this.style.background=='img/2.gif'?'img/1.gif':'img/2.gif'"> </td>

  </tr>

</table>
BootStrapTable表格利器通用教材
适用人群开发从业人员，产品原型人员，IT相关从业人员，想快速掌握技能的一切人员课程概述特点基于Bootstrap 开发响应式界面，固定表头，完全可配置，支持data属性，显示/隐藏列，显示/隐藏表头，使用AJAX获取JSON数据，点击表头可简单的进行排序，支持自定义列显示，支持单/复选，强大的分页功能，支持名片布局，支持多语言动态列：导出各种格式（支持xls，xlsx的office2003-office2019）
实现可编辑的表格
要实现可编辑的表格功能，我们要解决以下问题： 1.明确要修改的数据在表格中是哪些列（如何找到这些单元格）; 2.如何让单元格变成可以编辑的; 3.如何处理单元格的一些按键事件; 4.解决跨浏览器问题。 我们通过jQuery可以一步一步解决上述问题。 一、 绘制表格 首先我们先画好一个表格。 Code1: 代码如下: jQuery的
js实现可编辑表单
在修改数据时，有时候为了方便，我们希望能够直接在表格里面对数据进行直接修改。       要实现可编辑的表格功能，我们要解决以下问题：             1.明确要修改的数据在表格中是哪些列（如何找到这些单元格）;             2.如何让单元格变成可以编辑的;             3.如何处理单元格的一些按键事件;             4.解决跨浏览器问题。
jQuery一步一步实现跨浏览器的可编辑表格，支持IE、Fi
要实现可编辑的表格功能，我们要解决以下问题： 1.明确要修改的数据在表格中是哪些列（如何找到这些单元格）; 2.如何让单元格变成可以编辑的; 3.如何处理单元格的一些按键事件; 4.解决跨浏览器问题。 我们通过jQuery可以一步一步解决上述问题。 一、 绘制表格 首先我们先画好一个表格。 Code1:
jQuery一步一步实现跨浏览器的可编辑表格，支持IE、Firefox、Safari
要实现可编辑的表格功能，我们要解决以下问题： 1.明确要修改的数据在表格中是哪些列（如何找到这些单元格）; 2.如何让单元格变成可以编辑的; 3.如何处理单元格的一些按键事件; 4.解决跨浏览器问题。 我们通过jQuery可以一步一步解决上述问题。 一、 绘制表格 首先我们先画好一个表格。 Code1: 复制代码 代码如下:&lt;!DOCTYPE html PUBLIC "-//W3C//DTD...
CSS

61,115

社区成员

60,728

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章