网页单元格选择问题并将单元格的id传出

tianwailiuxingy 2009-10-16 11:10:36

<table id='table1' border="1" width="31%" bordercolor="#FF0000" height="238">
<tr>
<td onclick="this.style.background ='#0000FF';" width="111" height="128"><img src="zxtimeimg/tian.jpg" width="80" height="84">
<p>1天10元宝
</td>
<td height="128" onclick="this.style.background ='#0000FF';">
<img border="0" src="zxtimeimg/nian.jpg" width="80" height="76">
<p> 年3000元宝365天</td>
</tr>
<tr>
<td width="111">　</td>
<td>　</td>
</tr>
</table>

<input type="text" name="T1" size="14" value="id">
我想单击就选择单元格，并将单元格高亮显示，选择其他的单元格时，刚才选的单元格就不再高亮显示，如果没有选择其他的单元格这个被选的单元格就一直高亮着，并将单元格的id出高input的值
哪位大侠能帮忙啊

...全文

93 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

shenzhenNBA 2009-10-16

打赏
举报

修改成你的了，各个单元格和显示ID号的框加了ID。。。



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>TEST</title>

</head>

<style type="text/css"> 

body,td,div,input,fieldset,legend{font-family:Verdana; font-size:12px; color:#333333; font-weight:normal;}

td{line-height:20px;}

a:link,a:visited{font-family:Verdana; font-size:12px; color:#330099; font-weight:normal;  text-decoration:none;}

a:hover,a:active{font-family:Verdana; font-size:12px; color:#FF6600; font-weight:normal; }

span{font-family:Verdana; font-size:12px; color:red; font-weight:normal; padding-left:5px; margin:0px 10px;}

.cur01{background-color:#00CCFF; color:#FF3300; font-weight:bold;}

</style>

<script language="javascript" type="text/javascript">

var tempNode;

function setColor(tableID,e){

var evt,objX,o;

var i,j;

evt=e||window.event;

objX=evt.srcElement ? evt.srcElement : (evt.target ? evt.target : evt); 

o=document.getElementById(tableID);

for(i=0;i<o.rows.length;i++){

	for(j=0;j<o.rows[i].cells.length;j++){

			o.rows[i].cells[j].bgColor="";

		}

	}

if(objX.tagName && objX.tagName=="TD"){

		objX.bgColor="#00CCFF";

		document.getElementById("T1").value=objX.id;

	}

}

</script>

<body>

<p> 点击选中单元格</p>

<table id='table1' border="1" width="31%" onClick="javascript:setColor('table1',event);" bordercolor="#FF0000" height="238"> 

<tr> 

<td width="111" height="128" id="ID00"> 

<img src="zxtimeimg/tian.jpg"  width="80" height="84"> 

    <p>1天10元宝 </p>

</td> 

<td height="128" id="ID01"> 

<img border="0" src="zxtimeimg/nian.jpg" width="80" height="76"> 

<p> 年3000元宝365天</p> </td> 

</tr> 

<tr> 

<td width="111" id="ID02">  </td> 

<td id="ID03">  </td> 

</tr> 

</table> 

<input id="T1" type="text" name="T1" size="14" value="id"> 

</body>

</html>

shenzhenNBA 2009-10-16

打赏
举报

是不是这样？



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>TEST</title>

</head>

<style type="text/css"> 

body,td,div,input,fieldset,legend{font-family:Verdana; font-size:12px; color:#333333; font-weight:normal;}

td{line-height:20px;}

a:link,a:visited{font-family:Verdana; font-size:12px; color:#330099; font-weight:normal;  text-decoration:none;}

a:hover,a:active{font-family:Verdana; font-size:12px; color:#FF6600; font-weight:normal; }

span{font-family:Verdana; font-size:12px; color:red; font-weight:normal; padding-left:5px; margin:0px 10px;}

.cur01{background-color:#00CCFF; color:#FF3300; font-weight:bold;}

</style>

<script language="javascript" type="text/javascript">

var tempNode;

function setColor(tableID,e){

var evt,objX,o;

var i,j;

evt=e||window.event;

objX=evt.srcElement ? evt.srcElement : (evt.target ? evt.target : evt); //效果同上

o=document.getElementById(tableID);

for(i=0;i<o.rows.length;i++){

	for(j=0;j<o.rows[i].cells.length;j++){

			o.rows[i].cells[j].bgColor="";

		}

	}

if(objX.tagName && objX.tagName=="TD"){

	if(objX.parentNode.rowIndex!=0) 

	//除去第一行不改变背景色,

		objX.bgColor="#00CCFF";

	}

}

</script>

<body>

<table id="databox01" onClick="javascript:setColor('databox01',event);" width="100%" 

border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC" style="border:1px solid #336699;">

  <tr bgcolor="#66CCFF">

    <td width="19%"><b>列01</b></td>

    <td width="21%"><b>列02</b></td>

    <td width="19%"><b>列03</b></td>

    <td width="21%"><b>列04</b></td>

    <td width="20%"><b>列05</b></td>

  </tr>

  <tr bgcolor="#FFFFFF">

    <td>0101</td>

    <td>0102</td>

    <td>0103</td>

    <td>0104</td>

    <td>0105</td>

  </tr>

  <tr bgcolor="#FFFFFF">

    <td>0201</td>

    <td>0202</td>

    <td>0203</td>

    <td>0204</td>

    <td>0205</td>

  </tr>

  <tr bgcolor="#FFFFFF">

    <td>0301</td>

    <td>0302</td>

    <td>0303</td>

    <td>0304</td>

    <td>0305</td>

  </tr>

  <tr bgcolor="#FFFFFF">

    <td>0401</td>

    <td>0402</td>

    <td>0403</td>

    <td>0404</td>

    <td>0405</td>

  </tr>

</table>

<p> 点击选中单元格</p>

</body>

</html>