JQuery实现获取元素值并在table下添加tr td且赋值

答案:2 悬赏:50

解决时间 2021-04-27 16:24

提问者网友：痞子房西
2021-04-27 08:47

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
#d1{
width: 1000px;
height: 200px;
}
#d2{
width: 1000px;

}
</style>
<script type="text/javascript" src="jquery-2.1.1.js">

</script>
<body>
<form>
<div id="d1">
姓名:<input type="text" id="name" name="nam" />
Email:<input type="text" id="em" name="em" />
电话：<input type="text" id="phone" name="phone" /><br />
<input type="submit" id="sub1" name="sub" value="提交" />
</div>
<div id="d2">
<table border="1" cellpadding="0" cellspacing="0" id="table1">
<tr align="center" id="tr1"><td width="100px">姓名</td>
<td width="100px">Email</td>
<td width="100px">电话</td>
</tr>
</table>

</div>

</form>
</body>
<script type="text/javascript">
$("#sub1").click(function(){
//获取需提交文本的值
var na=$("#name").val();
var em=$("#em").val();
var phone=$("#phone").val();

var num=$("#table1").children().each(function(){}).length;
$mtr=$("<tr></tr>");
$mtd1=$("<td></td>");
$mtd2=$("<td></td>");
$mtd3=$("<td></td>");
$mtd1.text(na);
$mtd2.text(em);
$mtd3.text(phone);
$mtr.append($mtd1);
$mtr.append($mtd2);
$mtr.append($mtd3);
$("#table1 tbody").append($mtr);

})
</script>
</html>
实现效果的时候添加的值只会在table中显示一秒然后就不显示了，是代码哪里出现问题了吗

最佳答案

二级知识专家网友：陪伴是最长情的告白
2021-04-27 09:32

<input type="submit" id="sub1" name="sub" value="提交" />这句中的type="submit"改为type="button"就可以了。

全部回答

1楼网友：野心和家
2021-04-27 10:17

这句中的type="submit"改为type="button"就可以了。

我要举报

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息！