用js编辑可输入表格

0 0

用js编辑可输入表格5

function aaa(){
              var tdobj=window.event.srcElement;
              var trobj=tdobj.parentElement;
              if(tdobj.tagName !="TD"){
                   return;
              }
              alert(tdobj.offsetWidth+"\t"+tdobj.offsetHeight);
              alert(trobj.cells.length);
                 for(var i=0; i<trobj.cells.length; i++){
                  if(tdobj==trobj.cells[i]){
                  var s = "<input type='text' style='width:+"(tdobj.offsetWidth-10)"+px; height:+"(tdobj.offsetHeight-5)"+px'>";
                  tdobj.innerHTML=s;

这段代码哪里出错了？

问题补充：<html>
   <head>
         <script type="text/javascript">
              function aaa(){
              var tdobj=window.event.srcElement;
              var trobj=tdobj.parentElement;
              if(tdobj.tagName !="TD"){
                   return;
              }
              alert(tdobj.offsetWidth+"\t"+tdobj.offsetHeight);
              alert(trobj.cells.length);
                 for(var i=0; i<trobj.cells.length; i++){

                   if(tdobj==trobj.cells[i]){
                     var s = "<input type='text' style='width:+"(tdobj.offsetWidth-10)"+px; height:+"(tdobj.offsetHeight-5)"+px'>";
                     trobj.cells[i].innerHTML=s;
                     break;

                }
              }


              }
         </script>
   </head>
   <body>
          <table border="2px" cellpadding="0" cellspacing="0" onclick="aaa()">
                   <tr>
                        <th width="200" height="40">序号</th>
                        <th width="200" height="40">序号</th>
                        <th width="200" height="40">序号</th>
                        <th width="200" height="40">序号</th>
                   </tr>
                    <tr>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
          </table>
   </body>
</html>
注解后面的for循环，alert还能弹出窗口，for循环里的问题出在哪里呢

用js编辑可输入表格

2014年7月21日 22:08

心亦静静
26
0 0 3

2个答案按时间排序按投票排序

0 0

采纳的答案

楼主你的错误看不出来片段代码无能为力

看看写的这个是不是你想要的

<html>
<head>
<title></title>

</head>

<body>
    <table id="editTable" border="1">
        <tr>
            <td>aaaaaaa</td>
            <td>bbbbbbb</td>
            <td>ccccccc</td>
        </tr>
        <tr>
            <td>ddddddd</td>
            <td>eeeeeee</td>
            <td>fffffff</td>
        </tr>
        <tr>
            <td>gggggggg</td>
            <td>hhhhhhhh</td>
            <td>iiiiiiii</td>
        </tr>
    </table>
</body>
</html>

<script>

    //dom创建文本框

    var input = document.createElement("input");
    input.type="text" ;



    //得到当前的单元格
    var currentCell ;
    function editCell(event)
    {
        if(event==null)
       {
            currentCell=window.event.srcElement;
        }
        else
        {
            currentCell=event.target;
        }
        //根据Dimmacro 的建议修定下面的bug 非常感谢
        if(currentCell.tagName=="TD"){

        //用单元格的值来填充文本框的值
        input.value=currentCell.innerHTML;
             //当文本框丢失焦点时调用last
        input.onblur=last;
        input.ondblclick=last;
        currentCell.innerHTML="";
        //把文本框加到当前单元格上.
        currentCell.appendChild(input);
           //根据liu_binq63 的建议修定下面的bug 非常感谢
        input.focus();

        }

    }

    function last()
    {
        //充文本框的值给当前单元格
        currentCell.innerHTML = input.value;
    }



    //最后为表格绑定处理方法.
    document.getElementById("editTable").ondblclick=editCell;

</script>