用jquery遍历表格之后，添加一行数据，如果数据存在，就不给添加，跳出弹窗提示
需求：先使用表单，如果表单中已全部输入，点击确认，就给tabel添加一行，并且如果tabel中已经存在输入的数据，就不能添加；<!DOCTYPEhtml><html><h...
需求：先使用表单，如果表单中已全部输入，点击确认，就给tabel添加一行，并且如果tabel中已经存在输入的数据，就不能添加；
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.dt_select { position: relative; margin: 50px 10px 10px 20px;}
.dt_select ul { position: absolute; top: 19px; display: block; width: 250px;}
.dt_select em { font-style: normal; position: relative; left: 20px; top: -8px; width: 250px; padding: 5px 10px;border: 1px solid #ddd;cursor: pointer;}
.gradeTabel { width: 100%; border: 1px solid #ddd; border-radius: 5px;}
.gradeTabel tr th { padding: 10px 0; text-align: center; background: #d2d2d2;}
.gradeTabel tr td { padding: 10px 0; text-align: center; border-bottom: 1px solid #ddd;}
</style>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div class="dt_select sl_name" id="student_name">
<input type="text">
<input type="button" value="添加">
</div>
<div class="score_tabel">
<table class="gradeTabel" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th colspan="1">学号</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="1" class="stu_Number">131803215</td>
</tr>
</tbody>
</table>
</div>
</body>
</html> 展开
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.dt_select { position: relative; margin: 50px 10px 10px 20px;}
.dt_select ul { position: absolute; top: 19px; display: block; width: 250px;}
.dt_select em { font-style: normal; position: relative; left: 20px; top: -8px; width: 250px; padding: 5px 10px;border: 1px solid #ddd;cursor: pointer;}
.gradeTabel { width: 100%; border: 1px solid #ddd; border-radius: 5px;}
.gradeTabel tr th { padding: 10px 0; text-align: center; background: #d2d2d2;}
.gradeTabel tr td { padding: 10px 0; text-align: center; border-bottom: 1px solid #ddd;}
</style>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div class="dt_select sl_name" id="student_name">
<input type="text">
<input type="button" value="添加">
</div>
<div class="score_tabel">
<table class="gradeTabel" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th colspan="1">学号</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="1" class="stu_Number">131803215</td>
</tr>
</tbody>
</table>
</div>
</body>
</html> 展开
2个回答
展开全部
<script>
$(function(){
var tb = $("table.gradeTabel");
var txt = $(":text");
$(":button[value='添加']").click(function(){
var v = $.trim(txt.val());
if(v=="") return;
else if(!/^\d+$/.test(v)){
alert("要输入数字才对");
txt.focus();
txt.select();
return;
}
else if(tb.find("tr:contains('"+v+"')").length != 0){
alert("学号已经存在了!");
return;
}
tb.append("<tr><td colspan=1 class='stu_Number'>"+v+"</td></tr>");
});
});
</script>
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
