怎样做一个可编辑且可多选的Table?

要编辑很好办，要“多选”，你得解释一下是什么意思。<body>
<SCRIPT LANGUAGE="JavaScript">
<!--
function showinput()
{
elm = event.srcElement;
elm.innerHTML = "<input onblur='hide()'  value='"+elm.innerText+"' size=10 id='input1'></input>";
input1.focus();
input1.select();
}
function hide()
{
elm = event.srcElement;
elm.parentNode.innerHTML = elm.value
}
//-->
</SCRIPT>
<TABLE border=1 height=100>
<thead>
<th width=100></th>
<th width=100></th>
<th width=100></th>
</thead>
<tbody onclick="showinput()">
<TR>
<TD>aaa</TD>
<TD>bbb</TD>
<TD>ccc</TD>
</TR>
<TR>
<TD>ddd</TD>
<TD>eee</TD>
<TD>fff</TD>
</TR>
<TR>
<TD>ggg</TD>
<TD>hhh</TD>
<TD>iii</TD>
</TR>
</tbody>
</TABLE></body>

解决方案 »

  1.   

    是不是要这样？<html>
    <body>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function showinput()
    {
    elm = event.srcElement;
    elm.innerHTML = "<input onblur='hide()'  value='"+elm.innerText+"' size=10 id='input1'></input>";
    input1.focus();
    input1.select();
    }
    function hide()
    {
    elm = event.srcElement;
    elm.parentNode.innerHTML = elm.value
    }
    function deleteLine()
    {
    for (var i=tbody1.children.length-1; i>=0 ; i-- )
    if (tbody1.children[i].firstChild.firstChild.checked)
    tbody1.deleteRow(i);
    }
    function addLine()
    {
    elm = thead1.lastChild.cloneNode(true)
    elm.style.display="";
    tbody1.insertBefore(elm);
    }
    //-->
    </SCRIPT>
    <TABLE border=1 height=100>
    <thead id=thead1>
    <tr>
    <th></th>
    <th width=100></th>
    <th width=100></th>
    <th width=100></th>
    </tr>
    <TR style="display:none">
    <td><input type=checkbox id=checkLine></td>
    <TD>000</TD>
    <TD>000</TD>
    <TD>000</TD>
    </TR>
    </thead>
    <tbody onclick="showinput()" id=tbody1>
    <TR>
    <td><input type=checkbox id=checkLine></td>
    <TD>aaa</TD>
    <TD>bbb</TD>
    <TD>ccc</TD>
    </TR>
    <TR>
    <td><input type=checkbox id=checkLine></td>
    <TD>ddd</TD>
    <TD>eee</TD>
    <TD>fff</TD>
    </TR>
    <TR>
    <td><input type=checkbox id=checkLine></td>
    <TD>ggg</TD>
    <TD>hhh</TD>
    <TD>iii</TD>
    </TR>
    </tbody>
    <tfoot>
    <tr>
    <td colspan=4 align=center>
    <button onclick="deleteLine()">删除</button>
    <button onclick="addLine()">添加</button>
    </td>
    </tr>
    </tfoot>
    </TABLE></body></html>
      

  2.   

    <html>
    <body>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function showinput()
    {
    elm = event.srcElement;
    elm.innerHTML = "<input onblur='hide()'  value='"+elm.innerText+"' size=10 id='input1'></input>";
    input1.focus();
    input1.select();
    }
    function hide()
    {
    elm = event.srcElement;
    elm.parentNode.innerHTML = elm.value
    }
    function deleteLine()
    {
    for (var i=tbody1.children.length-1; i>=0 ; i-- )
    if (tbody1.children[i].firstChild.firstChild.checked)
    tbody1.deleteRow(i);
    }
    function addLine()
    {
    elm = thead1.lastChild.cloneNode(true)
    elm.style.display="";
    tbody1.insertBefore(elm);
    }
    //-->
    </SCRIPT>
    <TABLE border=1 height=100>
    <thead id=thead1>
    <tr>
    <th></th>
    <th width=100></th>
    <th width=100></th>
    <th width=100></th>
    </tr>
    <TR style="display:none">
    <td><input type=checkbox id=checkLine></td>
    <TD>000</TD>
    <TD>000</TD>
    <TD>000</TD>
    </TR>
    </thead>
    <tbody onclick="showinput()" id=tbody1>
    <TR>
    <td><input type=checkbox id=checkLine></td>
    <TD>aaa</TD>
    <TD>bbb</TD>
    <TD>ccc</TD>
    </TR>
    <TR>
    <td><input type=checkbox id=checkLine></td>
    <TD>ddd</TD>
    <TD>eee</TD>
    <TD>fff</TD>
    </TR>
    <TR>
    <td><input type=checkbox id=checkLine></td>
    <TD>ggg</TD>
    <TD>hhh</TD>
    <TD>iii</TD>
    </TR>
    </tbody>
    <tfoot>
    <tr>
    <td colspan=4 align=center>
    <button onclick="deleteLine()">删除</button>
    <button onclick="addLine()">添加</button>
    </td>
    </tr>
    </tfoot>
    </TABLE></body></html>
      

  3.   

    to emu(ston)
    当点击checkbox的时候会出现运行时未知错误！！
      

  4.   

    呵呵，忘了判断，我的脚本调试没有打开的。更正：<html>
    <body>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function showinput()
    {
    elm = event.srcElement;
    if (elm.tagName != "TD") return;
    elm.innerHTML = "<input onblur='hide()'  value='"+elm.innerText+"' size=10 id='input1'></input>";
    input1.focus();
    input1.select();
    }
    function hide()
    {
    elm = event.srcElement;
    elm.parentNode.innerHTML = elm.value
    }
    function deleteLine()
    {
    for (var i=tbody1.children.length-1; i>=0 ; i-- )
    if (tbody1.children[i].firstChild.firstChild.checked)
    tbody1.deleteRow(i);
    }
    function addLine()
    {
    elm = thead1.lastChild.cloneNode(true)
    elm.style.display="";
    tbody1.insertBefore(elm);
    }
    //-->
    </SCRIPT>
    <TABLE border=1 height=100>
    <thead id=thead1>
    <tr>
    <th></th>
    <th width=100></th>
    <th width=100></th>
    <th width=100></th>
    </tr>
    <TR style="display:none">
    <td><input type=checkbox id=checkLine></td>
    <TD>000</TD>
    <TD>000</TD>
    <TD>000</TD>
    </TR>
    </thead>
    <tbody onclick="showinput()" id=tbody1>
    <TR>
    <td><input type=checkbox id=checkLine></td>
    <TD>aaa</TD>
    <TD>bbb</TD>
    <TD>ccc</TD>
    </TR>
    <TR>
    <td><input type=checkbox id=checkLine></td>
    <TD>ddd</TD>
    <TD>eee</TD>
    <TD>fff</TD>
    </TR>
    <TR>
    <td><input type=checkbox id=checkLine></td>
    <TD>ggg</TD>
    <TD>hhh</TD>
    <TD>iii</TD>
    </TR>
    </tbody>
    <tfoot>
    <tr>
    <td colspan=4 align=center>
    <button onclick="deleteLine()">删除</button>
    <button onclick="addLine()">添加</button>
    </td>
    </tr>
    </tfoot>
    </TABLE></body></html>
      

  5.   

    呵呵，忘了判断，我的脚本调试没有打开的。更正：<html>
    <body>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function showinput()
    {
    elm = event.srcElement;
    if (elm.tagName != "TD") return;
    elm.innerHTML = "<input onblur='hide()'  value='"+elm.innerText+"' size=10 id='input1'></input>";
    input1.focus();
    input1.select();
    }
    function hide()
    {
    elm = event.srcElement;
    elm.parentNode.innerHTML = elm.value
    }
    function deleteLine()
    {
    for (var i=tbody1.children.length-1; i>=0 ; i-- )
    if (tbody1.children[i].firstChild.firstChild.checked)
    tbody1.deleteRow(i);
    }
    function addLine()
    {
    elm = thead1.lastChild.cloneNode(true)
    elm.style.display="";
    tbody1.insertBefore(elm);
    }
    //-->
    </SCRIPT>
    <TABLE border=1 height=100>
    <thead id=thead1>
    <tr>
    <th></th>
    <th width=100></th>
    <th width=100></th>
    <th width=100></th>
    </tr>
    <TR style="display:none">
    <td><input type=checkbox id=checkLine></td>
    <TD>000</TD>
    <TD>000</TD>
    <TD>000</TD>
    </TR>
    </thead>
    <tbody onclick="showinput()" id=tbody1>
    <TR>
    <td><input type=checkbox id=checkLine></td>
    <TD>aaa</TD>
    <TD>bbb</TD>
    <TD>ccc</TD>
    </TR>
    <TR>
    <td><input type=checkbox id=checkLine></td>
    <TD>ddd</TD>
    <TD>eee</TD>
    <TD>fff</TD>
    </TR>
    <TR>
    <td><input type=checkbox id=checkLine></td>
    <TD>ggg</TD>
    <TD>hhh</TD>
    <TD>iii</TD>
    </TR>
    </tbody>
    <tfoot>
    <tr>
    <td colspan=4 align=center>
    <button onclick="deleteLine()">删除</button>
    <button onclick="addLine()">添加</button>
    </td>
    </tr>
    </tfoot>
    </TABLE></body></html>