100分求助一个页面样式的问题.马上揭贴

时间：2021-01-08 06:47:24
<table width="400" border="1">
  <tr><td>aaa</td></tr>
<tr><td>bbb</td></tr>
<tr><td>ccc</td></tr>
<tr><td>ddd</td></tr>
<tr><td>eee</td></tr>
<tr><td>fff</td></tr>
<tr><td>ggg</td></tr>
<tr><td>hhh</td></tr>
<tr><td>iii</td></tr>
<tr><td>jjj</td></tr>
<tr><td>kkk</td></tr>

</table>

<table width="400" border="1">
  <tr><td>新增   修改  删除</td></tr>
</table>

页面如上,怎么样可以做到让用户鼠标移到某行后,单击该行上的文字,如:ggg，然后让该行颜色变深，鼠标移开后该行颜色任不变，直到单击另外一行的文字，让另外一行的文字颜色变深，用户操作下面的新增,修改或删除操作时可以根据上面某行的颜色深决定具体那一行的记录．

13 个解决方案

#1

<tr  onmouseover="this.style.backgroundColor='beige'"  onmouseout="this.style.backgroundColor='white'"><td>bbb</td></tr>

#2

<table width="400" border="1">
  <tr><td新增   ><a href=javascript:edit();>修改</a>  删除</td></tr>
</table>


function edit(){
  alert();
  这里会得到那行颜色深的记录的id。主要是可以得到记录的id，然后可以根据记录的id进入到相应的修改页面
  window.location.href = "editURL.jsp?id="+id
}

#3

有人吗?帮看看这个问题

#4

http://community.csdn.net/Expert/topic/4489/4489583.xml?temp=.2978479

#5

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>code by meixx</title>
<script language="JavaScript">
<!--
var selectRow=null;//记录上一次click过的行
var pointRow=null;//记录上次mouseover过的行

function moveRow(src){
   if(pointRow!=null)
      pointRow.style.backgroundColor="#FFFFFF";
   if(src!=selectRow){
      pointRow=src;
      pointRow.style.backgroundColor="#B6D3FC";
   }
}
function clickRow(src){
   if(selectRow!=null){
      selectRow.style.backgroundColor="#FFFFFF";
      selectRow.style.color="#000000";
   }
   selectRow=src;
   selectRow.style.backgroundColor="#0000FF";
   selectRow.style.color="#FFFFFF";
   pointRow=null;
}

//-->
</script></head>

<body>
<table width="100%"  border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse" bordercolor="#000000">
  <tr onMouseOver="moveRow(this)" onClick="clickRow(this)">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr onMouseOver="moveRow(this)" onClick="clickRow(this)">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr onMouseOver="moveRow(this)" onClick="clickRow(this)">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr onMouseOver="moveRow(this)" onClick="clickRow(this)">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr onMouseOver="moveRow(this)" onClick="clickRow(this)">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

</body>
</html>

#6

<script>
function clickTable(obj)
{
    event.cancelBubble = true;

    resetTable(obj);

    if(event.srcElement.tagName == "TD")
    {
        var srcObj = event.srcElement;
        srcObj .parentNode.style.backgroundColor = "#ffff00";
        document.getElementById("hdn").value = srcObj.innerText;
    }   
}

function resetTable(obj)
{
    for(var i=0; i<obj.rows.length; i++)
    {
        obj.rows[i].style.backgroundColor = "";
    }
}
</script>

<table width="400" border="1" onclick="clickTable(this)">
  <tr><td>aaa</td></tr>
<tr><td>bbb</td></tr>
<tr><td>ccc</td></tr>
<tr><td>ddd</td></tr>
<tr><td>eee</td></tr>
<tr><td>fff</td></tr>
<tr><td>ggg</td></tr>
<tr><td>hhh</td></tr>
<tr><td>iii</td></tr>
<tr><td>jjj</td></tr>
<tr><td>kkk</td></tr>

</table>
<input id=hdn type=hidden>
<table width="400" border="1">
  <tr><td><a href="#" onclick="alert('你选择了 ' + document.getElementById('hdn').value)">新增</a>   修改  删除</td></tr>
</table>

#7

如果要求得到值的话,就加一个hidden元素吧,像楼上的这样做

#8


对　　

加个隐藏域　用来保存ID

#9

小梅的法子可取，用一个全局变量保存被选中的那个行（tr）对象

#10

还有些bug,望大狭们在帮忙想想办法.
昨天贴子上的页面的html代码比较整齐,实际项目中的HTML页面不一定这么工整的,很可能是一个table中有可能还会套用一个table,甚至两个,象下面这段,一个table中还有一个table,点击每一行就出问题拉,会存在两行或以上的行颜色变化,有没有什么办法能够控制只能让页面的一行颜色变深呀!谢谢大家拉~~~~


<script>
function clickTable(obj)
{
    
event.cancelBubble = true;
    
    resetTable(obj);

    if(event.srcElement.tagName == "TD")
    {
        var srcObj = event.srcElement;
        srcObj .parentNode.style.backgroundColor = "#ffff00";
        document.getElementById("hdn").value = srcObj.innerText;
    }   
}

function resetTable(obj)
{
    for(var i=0; i<obj.rows.length; i++)
    {
        obj.rows[i].style.backgroundColor = "";
    }
}
</script>

<table width="400" border="1" onclick="clickTable(this)">
  <tr>
   <td>
   <table width="400" border="1">
   <tr><td >aaa</td></tr>
   <tr><td>bbb</td></tr>
   <tr><td>ccc</td></tr>
   <tr><td>ddd</td></tr>
   <tr><td>eee</td></tr>
</table>
</td>
 </tr>
<tr><td>fff</td></tr>
<tr><td>ggg</td></tr>
<tr><td>hhh</td></tr>

<tr><td>iii</td></tr>
<tr><td>jjj</td></tr>
<tr><td>kkk</td></tr>

</table>


<input id=hdn type=hidden>
<table width="400" border="1">
  <tr><td><a href="#" onclick="alert('你选择了 ' + document.getElementById('hdn').value)">新增</a>   修改  删除</td></tr>
</table>

#11

顶一下

#12

try

<script type="text/javascript">
var objCurrentRow = null;
function clickTable(e)
{

var obj;    
if (!e) e = window.event;
obj = e.target || e.srcElement;
while (obj != null && obj.tagName != 'TR')
obj = obj.parentNode;
if (obj != null)
{
if (objCurrentRow != null)
objCurrentRow.style.backgroundColor = "";
obj.style.backgroundColor = "#ffff00";
objCurrentRow = obj;
}
}

</script>

<table width="400" border="1" onclick="clickTable(event)">
  <tr>
   <td>
   <table width="400" border="1">
   <tr><td >aaa</td></tr>
   <tr><td>bbb</td></tr>
   <tr><td>ccc</td></tr>
   <tr><td>ddd</td></tr>
   <tr><td>eee</td></tr>
</table>
</td>
 </tr>
<tr><td>fff</td></tr>
<tr><td>ggg</td></tr>
<tr><td>hhh</td></tr>
<tr><td>iii</td></tr>
<tr><td>jjj</td></tr>
<tr><td>kkk</td></tr>
</table>

#13

UP

#1

<tr  onmouseover="this.style.backgroundColor='beige'"  onmouseout="this.style.backgroundColor='white'"><td>bbb</td></tr>

#2

<table width="400" border="1">
  <tr><td新增   ><a href=javascript:edit();>修改</a>  删除</td></tr>
</table>


function edit(){
  alert();
  这里会得到那行颜色深的记录的id。主要是可以得到记录的id，然后可以根据记录的id进入到相应的修改页面
  window.location.href = "editURL.jsp?id="+id
}

#3

有人吗?帮看看这个问题

#4

http://community.csdn.net/Expert/topic/4489/4489583.xml?temp=.2978479

#5

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>code by meixx</title>
<script language="JavaScript">
<!--
var selectRow=null;//记录上一次click过的行
var pointRow=null;//记录上次mouseover过的行

function moveRow(src){
   if(pointRow!=null)
      pointRow.style.backgroundColor="#FFFFFF";
   if(src!=selectRow){
      pointRow=src;
      pointRow.style.backgroundColor="#B6D3FC";
   }
}
function clickRow(src){
   if(selectRow!=null){
      selectRow.style.backgroundColor="#FFFFFF";
      selectRow.style.color="#000000";
   }
   selectRow=src;
   selectRow.style.backgroundColor="#0000FF";
   selectRow.style.color="#FFFFFF";
   pointRow=null;
}

//-->
</script></head>

<body>
<table width="100%"  border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse" bordercolor="#000000">
  <tr onMouseOver="moveRow(this)" onClick="clickRow(this)">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr onMouseOver="moveRow(this)" onClick="clickRow(this)">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr onMouseOver="moveRow(this)" onClick="clickRow(this)">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr onMouseOver="moveRow(this)" onClick="clickRow(this)">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr onMouseOver="moveRow(this)" onClick="clickRow(this)">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

</body>
</html>

#6

<script>
function clickTable(obj)
{
    event.cancelBubble = true;

    resetTable(obj);

    if(event.srcElement.tagName == "TD")
    {
        var srcObj = event.srcElement;
        srcObj .parentNode.style.backgroundColor = "#ffff00";
        document.getElementById("hdn").value = srcObj.innerText;
    }   
}

function resetTable(obj)
{
    for(var i=0; i<obj.rows.length; i++)
    {
        obj.rows[i].style.backgroundColor = "";
    }
}
</script>

<table width="400" border="1" onclick="clickTable(this)">
  <tr><td>aaa</td></tr>
<tr><td>bbb</td></tr>
<tr><td>ccc</td></tr>
<tr><td>ddd</td></tr>
<tr><td>eee</td></tr>
<tr><td>fff</td></tr>
<tr><td>ggg</td></tr>
<tr><td>hhh</td></tr>
<tr><td>iii</td></tr>
<tr><td>jjj</td></tr>
<tr><td>kkk</td></tr>

</table>
<input id=hdn type=hidden>
<table width="400" border="1">
  <tr><td><a href="#" onclick="alert('你选择了 ' + document.getElementById('hdn').value)">新增</a>   修改  删除</td></tr>
</table>

#7

如果要求得到值的话,就加一个hidden元素吧,像楼上的这样做

#8


对　　

加个隐藏域　用来保存ID

#9

小梅的法子可取，用一个全局变量保存被选中的那个行（tr）对象

#10

还有些bug,望大狭们在帮忙想想办法.
昨天贴子上的页面的html代码比较整齐,实际项目中的HTML页面不一定这么工整的,很可能是一个table中有可能还会套用一个table,甚至两个,象下面这段,一个table中还有一个table,点击每一行就出问题拉,会存在两行或以上的行颜色变化,有没有什么办法能够控制只能让页面的一行颜色变深呀!谢谢大家拉~~~~


<script>
function clickTable(obj)
{
    
event.cancelBubble = true;
    
    resetTable(obj);

    if(event.srcElement.tagName == "TD")
    {
        var srcObj = event.srcElement;
        srcObj .parentNode.style.backgroundColor = "#ffff00";
        document.getElementById("hdn").value = srcObj.innerText;
    }   
}

function resetTable(obj)
{
    for(var i=0; i<obj.rows.length; i++)
    {
        obj.rows[i].style.backgroundColor = "";
    }
}
</script>

<table width="400" border="1" onclick="clickTable(this)">
  <tr>
   <td>
   <table width="400" border="1">
   <tr><td >aaa</td></tr>
   <tr><td>bbb</td></tr>
   <tr><td>ccc</td></tr>
   <tr><td>ddd</td></tr>
   <tr><td>eee</td></tr>
</table>
</td>
 </tr>
<tr><td>fff</td></tr>
<tr><td>ggg</td></tr>
<tr><td>hhh</td></tr>

<tr><td>iii</td></tr>
<tr><td>jjj</td></tr>
<tr><td>kkk</td></tr>

</table>


<input id=hdn type=hidden>
<table width="400" border="1">
  <tr><td><a href="#" onclick="alert('你选择了 ' + document.getElementById('hdn').value)">新增</a>   修改  删除</td></tr>
</table>

#11

顶一下

#12

try

<script type="text/javascript">
var objCurrentRow = null;
function clickTable(e)
{

var obj;    
if (!e) e = window.event;
obj = e.target || e.srcElement;
while (obj != null && obj.tagName != 'TR')
obj = obj.parentNode;
if (obj != null)
{
if (objCurrentRow != null)
objCurrentRow.style.backgroundColor = "";
obj.style.backgroundColor = "#ffff00";
objCurrentRow = obj;
}
}

</script>

<table width="400" border="1" onclick="clickTable(event)">
  <tr>
   <td>
   <table width="400" border="1">
   <tr><td >aaa</td></tr>
   <tr><td>bbb</td></tr>
   <tr><td>ccc</td></tr>
   <tr><td>ddd</td></tr>
   <tr><td>eee</td></tr>
</table>
</td>
 </tr>
<tr><td>fff</td></tr>
<tr><td>ggg</td></tr>
<tr><td>hhh</td></tr>
<tr><td>iii</td></tr>
<tr><td>jjj</td></tr>
<tr><td>kkk</td></tr>
</table>

#13

UP
标签：

相关文章