<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table{ border-collapse:collapse;}
td{ border:1px solid #000; height:30px;}
</style>
</head><body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>如上代码,一个空表格,我要实现单击某行时:
1、背景变色
2、在此行正下方的正中间创建2个按钮“确定”与“取消”
3、在点击取消时,一切又还原了,即还原成了原始的空表格(背景没了,按钮也不见了)
下面是我的理想图:

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>无标题文档</title>
            <script>
                var t, n, c;
                var lastrow;
                var lasttd1;
                var lasttd2;
                var nextRow;
                window.onload=function(){
                    t = document.getElementById("tb");
                    n = t.rows.length;
                    for(var i=0;i<n;i++){
                        t.rows[i].onclick = function(){
                            if(lastrow) {
                                lastrow.style.backgroundColor="#ffffff";
                                t.rows[nextRow].cells[1].innerHTML=lasttd1;
                                t.rows[nextRow].cells[2].innerHTML=lasttd2;
                            }
                            lastrow=this;
                            this.style.backgroundColor="#cceeff";
                             nextRow=this.rowIndex+1;
                            if(nextRow<3){
                                lasttd1= t.rows[nextRow].cells[1].innerHTML;
                                lasttd2=t.rows[nextRow].cells[2].innerHTML;
                                t.rows[nextRow].cells[1].innerHTML="<input type=button value=\"确定\">";
                                t.rows[nextRow].cells[2].innerHTML="<input type=button value=\"取消\">"
                            }else{
                                nextRow=0
                            }
                        };
                    }
                }
            </script>
            <style type="text/css">
                table{ border-collapse:collapse;}
                td{ border:1px solid #000; height:30px;}
            </style>
        </head>    <body>
            <table width="100%" border="0" cellspacing="0" cellpadding="0" id="tb">
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
            </table>
        </body>
    </html>浏览器对td的innerHTML属性支持不是很好,稍后给你改个好点版本
      

  2.   

    嗯.方法类似EXT模拟comboBox
    做好定位就行.
      

  3.   

    那这样<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>无标题文档</title>
            <script>
                var t, n, c;
                var lastrow;
                var lasttd1;
                var lasttd2;
                var nextRow;
                window.onload=function(){
                    t = document.getElementById("tb");
                    n = t.rows.length;
                    for(var i=0;i<n;i++){
                        t.rows[i].onclick = function(){
                            if(lastrow) {
                                lastrow.style.backgroundColor="#ffffff";
                            }
                            lastrow=this;
                            this.style.backgroundColor="#cceeff";
                            var nextRow=this.rowIndex+1;
                            if(nextRow<3){
                                document.getElementById("movediv").style.left=this.cells[1].offsetLeft+20;
                                document.getElementById("movediv").style.top=t.rows[nextRow].offsetTop+20;
                                document.getElementById("movecalcel").style.left=this.cells[2].offsetLeft+20;
                                document.getElementById("movecalcel").style.top=t.rows[nextRow].offsetTop+20;
                            }
                           
                        };
                    }
                }
            </script>
            <style type="text/css">
                table{ border-collapse:collapse;}
                td{ border:1px solid #000; height:30px;}
            </style>
        </head>    <body>        <div id=movediv style="position:absolute;width:23%;height:20px;z-index:2"><input type="button" value="确定"></div>
            <div id=movecalcel style="position:absolute;width:23%;height:20px;z-index:2"><input type="button" value="取消"></div>        <table width="100%" border="0" cellspacing="0" cellpadding="0" id="tb">
                <thead></thead>
                <tbody> <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr></tbody>        </table>
        </body>
    </html>
      

  4.   

    少了段代码..
    把两个浮动div不用的时候隐藏掉就行了
      

  5.   


    不能将要创建的按钮先放入BODY里面,要用JS去创建,这样的话,事件都消失了
      

  6.   

    动态创建也是可以的<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>无标题文档</title>        <script>
                var t, n, c;
                var lastrow;
                var lasttd1;
                var lasttd2;
                var nextRow;
                window.onload=function(){
                    createOKDiv();
                    createCANDiv();
                    t = document.getElementById("tb");
                    n = t.rows.length;
                    for(var i=0;i<n;i++){
                        t.rows[i].onclick = function(){
                            if(lastrow) {
                                lastrow.style.backgroundColor="#ffffff";
                            }
                            lastrow=this;
                            this.style.backgroundColor="#cceeff";
                            var nextRow=this.rowIndex+1;
                            if(nextRow<3){
                                document.getElementById("movediv").style.display="block";
                                 document.getElementById("movecalcel").style.display="block";
                                document.getElementById("movediv").style.left=parseInt(this.cells[1].offsetLeft)+20+"px";                            document.getElementById("movediv").style.top=parseInt(t.rows[nextRow].offsetTop)+15+"px";
                                document.getElementById("movecalcel").style.left=parseInt(this.cells[2].offsetLeft)+20+"px";
                                document.getElementById("movecalcel").style.top=parseInt(t.rows[nextRow].offsetTop)+15+"px";
                            }else{
                                 document.getElementById("movediv").style.display="none";
                                 document.getElementById("movecalcel").style.display="none";
                            }
                           
                        };
                    }
                }
                function createOKDiv(){
                    var movediv=document.createElement("div");
                    movediv.className="movediv";
                    movediv.id="movediv";
                    var inputOk=document.createElement("input");
                    inputOk.type="button";
                    inputOk.value="确定";
                    movediv.appendChild(inputOk);
                    document.body.appendChild(movediv)
                }
                function createCANDiv(){
                    var movediv=document.createElement("div");
                    movediv.className="movecalcel";
                    movediv.id="movecalcel";
                    var inputCancel=document.createElement("input");
                    inputCancel.type="button";
                    inputCancel.value="取消";
                    movediv.appendChild(inputCancel);
                    document.body.appendChild(movediv);
                }
            </script>
            <style type="text/css">
                table{ border-collapse:collapse;}
                td{ border:1px solid #000; height:30px;}
                #movediv{
                    position:absolute;
                    width:23%;
                    height:20px;
                    z-index:2;
                    display:none;
                }
                #movecalcel{
                    position:absolute;
                    width:23%;
                    height:20px;
                    z-index:2;
                    display:none;
                }
            </style>
        </head>    <body>
            <table width="100%" border="0" cellspacing="0" cellpadding="0" id="tb">
                <thead></thead>
                <tbody> <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr></tbody>        </table>
        </body>
    </html>
      

  7.   

    不过,我更喜欢先写好HTML代码在BODY里,哈我也来个,更简单
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    table{ border-collapse:collapse;}
    td{ border:1px solid #000; height:30px;}
    </style>
    </head><body>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" onclick="RowClick();">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table><div id="divButtons"
        style="text-align:center; position:absolute;width:100%; left:0px; top:0px;">
        <input type="button" value="确定" onclick="Confirm();" />
        <input type="button" value="取消" onclick="Cancel()" />
    </div>
    <script language="javascript" type="text/javascript">
        var currentRow = null;
        var buttons = document.getElementById("divButtons");
        buttons.style.display = "none";
        
        function RowClick() {
            var row = FindRow();
            if (row == null) return;
            if (currentRow != null) {
                currentRow.style.backgroundColor = "";
            }
            currentRow = row;
            currentRow.style.backgroundColor = "#C5E2E3";
            ShowButtons();
        }
        function FindRow() {
            var dom = event.srcElement;
            while (dom.tagName) {
                if (dom.tagName == "BODY") return null;
                if (dom.tagName == "TR") return dom;
                dom = dom.parentNode;
            }
            return null;
        }
        function ShowButtons() {
            var rects = currentRow.getClientRects();
            var rect = rects[0];
            buttons.style.top = (rect.bottom + 5) + "px";
            buttons.style.display = "block";
        }
        function HideButtons() {
            buttons.style.display = "none";
        }
        function Confirm() {
            HideButtons();
        }
        function Cancel() {
            if (currentRow != null) {
                currentRow.style.backgroundColor = "";
            }
            HideButtons();
        }
    </script>
    </body>
    </html>