form 表單里面的table 點擊添加一行操作遇到的坑


問題:添加一行時在form表單里就是不能成功,去掉form表單后可以正常執行。

代碼如下

  

<head>
<script type="text/javascript" src="D:/lll/jquery-3.3.1.min.js"></script>
<script>
//添加一行
function add_tr(obj) {
var tr = $(obj).parent().parent();
tr.after(tr.clone());
}
function del_tr(obj) {
$(obj).parent().parent().remove();
}

</script>
</head>
<body>
<form>
<table class="table">
<tr>
<td><input type='text' name='name' /></td>
<td><input type='text' name='age' /></td>
<td><input type='text' name='sex' /></td>
<td>
<select>
<option>aa</option>
</select>
</td>
<td>
<button class="button" onclick="add_tr(this)”>添加</button>
<button class="button" onclick="del_tr(this)">刪除</button>
</td>
</tr>
</table>
</form>
</body>

解決:

最后問到一個前端的,form表單默認是會提交button的。所以在botton中添加以下內容就可以了。

<button class="button" onclick="add_tr(this);return false">添加</button>
<button class="button" onclick="del_tr(this);return false">刪除</button>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM