一个动态文本框的问题

kevin82819 2014-09-04 06:28:50

代码如下：
<script>
i=7;
function addrow()
{
i++;
str = document.all.mytable.outerHTML;
str = str.substring(0,str.length-16);
str += '<tr><td><input type="text" name="Field1'+i+'" size="30" ></td>';
str += '<td><input type="text" name="Field2'+i+'" size="30"></td></tr></TBody></Table>';
if (document.all.mytable.rows.length>25){
alert("太多了");
}
if (document.all.mytable.rows.length<26)
{
document.all.mytable.outerHTML = str;
}
return false;
}
function deleterow(){
if (document.all.mytable.rows.length>8){
document.all.mytable.deleteRow(document.all.mytable.rows.length-1);
i--;
}
}
</script>
<form method="POST" name="bd" id="bd" action="444.asp?action=do">
<table id=mytable>
<tr>
<td align="center">用料</td>
<td align="center">用量</td>
</tr>
<tr>
<td><input type="text" name="yongliao1" size="30"></td>
<td><input type="text" name="yongliang1" size="30"></td>
</tr>
<tr>
<td><input type="text" name="yongliao2" size="30"></td>
<td><input type="text" name="yongliang2" size="30"></td>
</tr>
<tr>
<td><input type="text" name="yongliao3" size="30"></td>
<td><input type="text" name="yongliang3" size="30"></td>
</tr>
<tr>
<td><input type="text" name="yongliao4" size="30"></td>
<td><input type="text" name="yongliang4" size="30"></td>
</tr>
<tr>
<td><input type="text" name="yongliao5" size="30"></td>
<td><input type="text" name="yongliang5" size="30"></td>
</tr>
<tr>
<td><input type="text" name="yongliao6" size="30"></td>
<td><input type="text" name="yongliang6" size="30"></td>
</tr>
<tr>
<td><input type="text" name="Field1" size="30"></td>
<td><input type="text" name="Field2" size="30"></td>
</tr>

</table>
<input type=button value="添加" name="Cont" onclick=addrow()>
<input type="button" value="删除" onclick="deleterow()" />
</form>

现在有个问题，为什么我在文本框输入好内容后点击添加按钮，之前填写的内容全没有了？？

...全文

150 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

kevin82819 2014-09-05

打赏
举报

楼上，再问一下，如果在新增的文本框要设置居中对齐该怎么设置？

豪情 2014-09-04

打赏
举报

outerhtml有的浏览器可能不支持，也不在标准之内。document.all.mytable也是一样。下面代码仅供参考：



<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    var i = 7;
    function addrow(){
        i++;
        var tab = document.getElementById('mytable');
        var tr = document.createElement('tr');

        var td = document.createElement('td');
        td.innerHTML = '<input type="text" name="Field1' + i + '"  size="30" >';
        tr.appendChild(td);

        var td = document.createElement('td');
        td.innerHTML = '<input type="text" name="Field2' + i + '"   size="30">';
        tr.appendChild(td);

        if(tab.tBodies[0].rows.length > 25){
            alert("太多了");
            return ;
        }
        tab.tBodies[0].appendChild(tr);

        return false;
    }
    function deleterow(){
        if(document.all.mytable.rows.length > 8){
            document.all.mytable.deleteRow(document.all.mytable.rows.length - 1);
            i--;
        }
    }
</script>
<form method="POST" name="bd" id="bd" action="444.asp?action=do">
    <table id=mytable>
        <tr>
            <td align="center">用料</td>
            <td align="center">用量</td>
        </tr>
        <tr>
            <td><input type="text" name="yongliao1" size="30"></td>
            <td><input type="text" name="yongliang1" size="30"></td>
        </tr>
        <tr>
            <td><input type="text" name="yongliao2" size="30"></td>
            <td><input type="text" name="yongliang2" size="30"></td>
        </tr>
        <tr>
            <td><input type="text" name="yongliao3" size="30"></td>
            <td><input type="text" name="yongliang3" size="30"></td>
        </tr>
        <tr>
            <td><input type="text" name="yongliao4" size="30"></td>
            <td><input type="text" name="yongliang4" size="30"></td>
        </tr>
        <tr>
            <td><input type="text" name="yongliao5" size="30"></td>
            <td><input type="text" name="yongliang5" size="30"></td>
        </tr>
        <tr>
            <td><input type="text" name="yongliao6" size="30"></td>
            <td><input type="text" name="yongliang6" size="30"></td>
        </tr>
        <tr>
            <td><input type="text" name="Field1" size="30"></td>
            <td><input type="text" name="Field2" size="30"></td>
        </tr>

    </table>
    <input type=button value="添加" name="Cont" onclick=addrow()> <input type="button" value="删除" onclick="deleterow()"/>
</form>
</body>
</html>