作者a0960330 (ViperLiu)
看板Ajax
标题[问题] 如何让使用者已输入的内容不消失
时间Fri Aug 28 13:15:44 2015
我用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>
可是，如果使用者已经输入了内容在原有的栏位里面
按下按钮新增栏位之後，原本已经输入的内容就会被清空
能有什麽解决的办法吗?
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 220.130.225.223
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Ajax/M.1440738946.A.668.html
※ 编辑: a0960330 (220.130.225.223), 08/28/2015 13:18:34
※ 编辑: a0960330 (220.130.225.223), 08/28/2015 13:19:20
1F：→ Darkland: 改 innerHTML 元件会重绘，用 appendChild 应该可行 08/28 13:20
2F：→ Darkland: 但我好像有在 IE 遇过 tbody 不给改的状况就是了. 08/28 13:20
谢谢您，我去研究看看
※ 编辑: a0960330 (220.130.225.223), 08/28/2015 13:24:40
※ 编辑: a0960330 (220.130.225.223), 08/28/2015 13:27:06
3F：推 mrbigmouth: 一楼正解 不过你可以考虑用jQuery 会轻松非常多 08/28 15:30
4F：→ mrbigmouth: 或者类似工具 08/28 15:30
5F：推 poiuy999: $(document).find('input').each(function{$(this).Val( 08/28 23:45
6F：→ poiuy999: '')}) 08/28 23:45
7F：→ joedenkidd: 用jquery append吧！ 08/30 21:54
8F：推 wyubin: appendChild就可以了，不用特别载入jquery 09/02 23:37
9F：→ wyubin: 用变数存document.createElement('tr')，再塞innerHTML 09/02 23:41
10F：→ wyubin: 然後用appendChild加到table里面 09/02 23:41