js挂一个表格在div里面,允许用户添加,判断表格是否重复,不经过sql,怎么写?
获取表格中需要判断重复的输入控件对比下值,有重复的就不添加就行了
通过element.append方法实现
<div>
<table id="data">
<tr><td>名称</td></tr>
<tr><td>张三</td></tr>
<tr><td>李四</td></tr>
...
</table>
</div>
js如下
添加的时候判断已添加的表格内容是否包含将要添加的值
如:
function checkExists(val){
var isfag=false;
$("table#data").each(function(i,e){
var name=$(e).find("td").text();
if(name==val){
isflag=true;
break;
}
});
return isfag;
}
拿方法返回值即可
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<table id="tab">
<tr><td>aaa</td></tr>
<tr><td>bbb</td></tr>
</table>
<input type="text" id="text" value="" />
<input type="button" value="add" onclick="addtab();" />
<script type="text/javascript">
function addtab() {
var tab = $("#tab");
var str = $("#text").val();
if (tab.find("td:contains("+str+")").length>0) {
alert("有重复");
return;
}
tab.append("<tr><td>"+str+"</td></tr>");
}
</script>
</body>
</html>
改一下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<table id="tab">
<tr><td>aaa</td></tr>
<tr><td>bbb</td></tr>
</table>
<input type="text" id="text" value="" />
<input type="button" value="add" onclick="addtab();" />
<script type="text/javascript">
function addtab() {
var tab = $("#tab");
var str = $.trim($("#text").val());
if (tab.find("td").filter(function(){return $.trim($(this).text())==str;}).length>0) {
alert("有重复");
return;
}
tab.append("<tr><td>"+str+"</td></tr>");
}
</script>
</body>
</html>
用元素js写了个demo,不知道是不是你想要的.
<!DOCTYPE html>
上面发的格式错了.重发一次,用元素js写的
<!DOCTYPE html>