JQuery实现获取元素值并在table下添加tr td且赋值
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title></head><styletype="text...
<!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中显示一秒 然后就不显示了，是代码哪里出现问题了吗 展开
<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中显示一秒 然后就不显示了，是代码哪里出现问题了吗 展开
1个回答
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
