例子,点击单元格可输入
<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>

解决方案 »

  1.   

    <script>
    function addNewColumn()
    {

    document.form1.newTable.value =  parseInt(document.form1.newTable.value) + 1
    var newItemId
    if((document.form1.newTable.value).length > 2 )
    {
      alert("对不起,您的栏目不能超过 99 个!\n\n如需要更多的栏目,请与软件供应商联系!!")
      window.location.reload();
    }

    if((document.form1.newTable.value).length < 2 )
    newItemId = "0" + document.form1.newTable.value
    else
    newItemId = document.form1.newTable.value

    newItemId = "C" + newItemId
    var objItem = '<table width="100%" id="' + newItemId + '" border="01" cellspacing="0" cellpadding="2" align="center">'
    objItem += '<tr bgcolor="#C7E8F8"><td width="100%"><nobr><b>一级栏目名称:'
    objItem += '<input type="text" class="border" size="12" name="'+ newItemId +'CTitle" onmouseover="showTips(this)"> 栏目链接:<input type="text" class="border" name="'+ newItemId +'CHref" size="40" onmouseover="showTips(this)">'
        //    objItem += ' 链接样式单名称: <input type="text" name="'+ newItemId +'CClass" size="6" onmouseover="showTips(this)"> 顺序: <input type="text" name="'+ newItemId +'COrder" size="2" onmouseover="showTips(this)">'
    objItem += '</td></tr><tr><td><nobr>'
    objItem += '子栏目名称: <input type="text" name="'+ newItemId +'ChildTitle" size="15" class="border" onKeypress="addNewChild(this)"> 链接: <input type="text" class="border" name="'+ newItemId +'ChildHref" size="45" onmouseover="showTips(this)"></nobr>'
        //   objItem += ' 样式单名称: <input type="text" name="'+ newItemId +'ChildClass" size="6" onmouseover="showTips(this)"> 顺序: <input type="text" name="'+ newItemId +'ChildOrder" size="2" onmouseover="showTips(this)">'
    objItem += '<div id="'+ newItemId +'Child"></div>'
    objItem += '</td></tr></table><br>'

    document.all.addNewHere.insertAdjacentHTML("BeforeBegin",objItem)
    }

    function showTips(obj)
    {
    obj.title=obj.value
    }
    function addNewChild(obj)
    {
    var isblank = "false"
    for(var i=0;i<document.form1.elements[obj.name].length;i++)
    {
    if(document.form1.elements[obj.name].item(i).value == "") 
    isblank = "yes"
    }
    if (isblank != "yes")
    {
    var inputname = (obj.name).substring(0,8)
    inputname = inputname.toString()
    var objItem = ""
    objItem += '<nobr>子栏目名称: <input type="text" class="border" name="'+ inputname +'Title" size="15" onKeypress="addNewChild(this)">'
    objItem += ' 链接: <input type="text" class="border" name="'+ inputname + 'Href" size="45" onMouseOver="showTips(this)"></nobr>'
    //objItem += ' 样式单名称: <input type="text" name="'+ inputname +'Class" size="6" onMouseOver="showTips(this)">'
    //objItem += ' 顺序: <input type="text" name="'+ inputname +'Order" size="2" onMouseOver="showTips(this)">'     
    document.all[inputname].insertAdjacentHTML("BeforeBegin",objItem)
    }
    }
    </script>

    <form name="form1" method="post" action="commonnav.asp">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
    <td>
    <table width="100%" id="C01" border="0" cellspacing="0" cellpadding="2" align="center" class="border">
    <tr bgcolor="#C7E8F8">
    <td width="100%">
    <nobr>
    <b>
    一级栏目
    名称:
    <input type="text" size="12" class="border" value="招生考试" name="C02CTitle" />
    栏目链接:
    <input type="text" size="40" class="border" value="../Exam/" name="C02CHref" />
    </b>
    </nobr>
    </td>
    </tr>
    <tr>
    <td>
    <nobr>子栏目名称:
    <input type="text" size="15" class="border" onBlur="addNewChild(this)" onkeypress="addNewChild(this)" value="MBA专题" name="C02ChildTitle" />
    链接:
    <input type="text" size="45" class="border" value="" name="C02ChildHref" />
    </nobr>
    <div id="C02Child" />
    </td>
    </tr>
    </table>
    <br />
    <div align="left">
    <input type="button" id="addNewHere" onclick="addNewColumn()" class="CustButton" value="增加一级栏目">
    </input>
    </div>
    <div align="right">
    <input type="hidden" name="newTable" value="4" />
    <input type="submit" value="保存设置" class="CustButton" title="保存设置">
    </input>
    <input type="reset" value="重新填写" class="CustButton" onclick="document.form1.reset()" style="cursor:hand" title="重新设置">
    </input>
    <input type="button" value="返回前页" class="CustButton" style="cursor:hand" title="取消设置" onclick="window.location='http://192.168.1.6/government/Portal/'">
    </input>
    </div>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </form>
      

  2.   

    <script>
    function addNewColumn()
    {

    document.form1.newTable.value =  parseInt(document.form1.newTable.value) + 1
    var newItemId
    if((document.form1.newTable.value).length > 2 )
    {
      alert("对不起,您的栏目不能超过 99 个!\n\n如需要更多的栏目,请与软件供应商联系!!")
      window.location.reload();
    }

    if((document.form1.newTable.value).length < 2 )
    newItemId = "0" + document.form1.newTable.value
    else
    newItemId = document.form1.newTable.value

    newItemId = "C" + newItemId
    var objItem = '<table width="100%" id="' + newItemId + '" border="01" cellspacing="0" cellpadding="2" align="center">'
    objItem += '<tr bgcolor="#C7E8F8"><td width="100%"><nobr><b>一级栏目名称:'
    objItem += '<input type="text" class="border" size="12" name="'+ newItemId +'CTitle" onmouseover="showTips(this)"> 栏目链接:<input type="text" class="border" name="'+ newItemId +'CHref" size="40" onmouseover="showTips(this)">'
        //    objItem += ' 链接样式单名称: <input type="text" name="'+ newItemId +'CClass" size="6" onmouseover="showTips(this)"> 顺序: <input type="text" name="'+ newItemId +'COrder" size="2" onmouseover="showTips(this)">'
    objItem += '</td></tr><tr><td><nobr>'
    objItem += '子栏目名称: <input type="text" name="'+ newItemId +'ChildTitle" size="15" class="border" onKeypress="addNewChild(this)"> 链接: <input type="text" class="border" name="'+ newItemId +'ChildHref" size="45" onmouseover="showTips(this)"></nobr>'
        //   objItem += ' 样式单名称: <input type="text" name="'+ newItemId +'ChildClass" size="6" onmouseover="showTips(this)"> 顺序: <input type="text" name="'+ newItemId +'ChildOrder" size="2" onmouseover="showTips(this)">'
    objItem += '<div id="'+ newItemId +'Child"></div>'
    objItem += '</td></tr></table><br>'

    document.all.addNewHere.insertAdjacentHTML("BeforeBegin",objItem)
    }

    function showTips(obj)
    {
    obj.title=obj.value
    }
    function addNewChild(obj)
    {
    var isblank = "false"
    for(var i=0;i<document.form1.elements[obj.name].length;i++)
    {
    if(document.form1.elements[obj.name].item(i).value == "") 
    isblank = "yes"
    }
    if (isblank != "yes")
    {
    var inputname = (obj.name).substring(0,8)
    inputname = inputname.toString()
    var objItem = ""
    objItem += '<nobr>子栏目名称: <input type="text" class="border" name="'+ inputname +'Title" size="15" onKeypress="addNewChild(this)">'
    objItem += ' 链接: <input type="text" class="border" name="'+ inputname + 'Href" size="45" onMouseOver="showTips(this)"></nobr>'
    //objItem += ' 样式单名称: <input type="text" name="'+ inputname +'Class" size="6" onMouseOver="showTips(this)">'
    //objItem += ' 顺序: <input type="text" name="'+ inputname +'Order" size="2" onMouseOver="showTips(this)">'     
    document.all[inputname].insertAdjacentHTML("BeforeBegin",objItem)
    }
    }
    </script>

    <form name="form1" method="post" action="commonnav.asp">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
    <td>
    <table width="100%" id="C01" border="0" cellspacing="0" cellpadding="2" align="center" class="border">
    <tr bgcolor="#C7E8F8">
    <td width="100%">
    <nobr>
    <b>
    一级栏目
    名称:
    <input type="text" size="12" class="border" value="招生考试" name="C02CTitle" />
    栏目链接:
    <input type="text" size="40" class="border" value="../Exam/" name="C02CHref" />
    </b>
    </nobr>
    </td>
    </tr>
    <tr>
    <td>
    <nobr>子栏目名称:
    <input type="text" size="15" class="border" onBlur="addNewChild(this)" onkeypress="addNewChild(this)" value="MBA专题" name="C02ChildTitle" />
    链接:
    <input type="text" size="45" class="border" value="" name="C02ChildHref" />
    </nobr>
    <div id="C02Child" />
    </td>
    </tr>
    </table>
    <br />
    <div align="left">
    <input type="button" id="addNewHere" onclick="addNewColumn()" class="CustButton" value="增加一级栏目">
    </input>
    </div>
    <div align="right">
    <input type="hidden" name="newTable" value="4" />
    <input type="submit" value="保存设置" class="CustButton" title="保存设置">
    </input>
    <input type="reset" value="重新填写" class="CustButton" onclick="document.form1.reset()" style="cursor:hand" title="重新设置">
    </input>
    <input type="button" value="返回前页" class="CustButton" style="cursor:hand" title="取消设置" onclick="window.location='http://192.168.1.6/government/Portal/'">
    </input>
    </div>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </form>