[问题] 如何让使用者已输入的内容不消失

楼主: a0960330 (ViperLiu)   2015-08-28 13:15:44
我用HTML设计了一个表单如下
<table id="table" style="float:inherit">
<tr><th>物品名称</th><th>数量</th><th>小计</th></tr>
<tr>
<td><input type="text" name="item[]" require></td>
<td><input type="text" name="many[]" require></td>
<td><input type="text" name="total[]" require></td>
</tr>
</table>
<input type="button" id="btn1" value="新增一项物品"><br/>
默认是只有一栏可以让使用者输入
因为不知道使用者有多少笔资料要输入,所以我设计一个按钮让使用者自行新增输入字段
如下:
<script>
window.onload = function(){
document.getElementById("btn1").onclick = newitem;
};
function newitem(){
document.getElementById("table").innerHTML+=
"<tr><td><input type=\"text\" name=\"item[]\" require></td>
<td><input type=\"text\" name=\"many[]\" require></td>
<td><input type=\"text\" name=\"total[]\" require></td></tr>";
}
</script>
可是,如果使用者已经输入了内容在原有的字段里面
按下按钮新增字段之后,原本已经输入的内容就会被清空
能有什么解决的办法吗?
作者: Darkland (小黑XDrz)   2015-08-28 13:20:00
改 innerHTML 元件会重绘,用 appendChild 应该可行但我好像有在 IE 遇过 tbody 不给改的状况就是了.
作者: mrbigmouth (大嘴先生)   2015-08-28 15:30:00
一楼正解 不过你可以考虑用jQuery 会轻松非常多或者类似工具
作者: poiuy999 (Nines)   2015-08-28 23:45:00
$(document).find('input').each(function{$(this).Val('')})
作者: joedenkidd (优质的蓝色射手)   2015-08-30 21:54:00
用jquery append吧!
作者: wyubin ( )   2015-09-02 23:37:00
appendChild就可以了,不用特别加载jquery用变量存document.createElement('tr'),再塞innerHTML然后用appendChild加到table里面

Links booklink

Contact Us: admin [ a t ] ucptt.com