js挂一个表格在div里面,允许用户添加,判断表格是否重复,不经过sql,怎么写?

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>





Document
<br> body {<br> margin-top: 100px;<br> text-align: center;<br> }</p> <pre><code> #createTb { width: 400px; height: 300px; margin: 50px auto; } table { width: 400px; height: 300px; border: 1px solid #000; border-collapse: collapse; } td { width: 100px; height: 100px; border: 1px solid #000; } &lt;/style&gt; </code></pre> <p></head></p> <p><body><br> <input id="btn" type="button" value="添加表格"><br> <div id="createTb"><br> </div><br> </body><br> </html></p> <script> // 获得元素 var btn = document.getElementById('btn'); var createTb = document.getElementById('createTb'); // 点击按钮动态生成表格 btn.onclick = function () { // 动态生成一个三行四列的表格 // 判断是否已经生成了表格 if (createTb.children.length > 0) { alert('表格不能重复添加'); return; } var table = document.createElement('table'); for (var i = 0; i < 3; i++) { var tr = document.createElement('tr'); for (var j = 0; j < 4; j++) { var td = document.createElement('td'); tr.appendChild(td); } table.appendChild(tr); } createTb.appendChild(table); } </script>

上面发的格式错了.重发一次,用元素js写的

<!DOCTYPE html>





Document
<br> body {<br> margin-top: 100px;<br> text-align: center;<br> }</p> <pre><code> #createTb { width: 400px; height: 300px; margin: 50px auto; } table { width: 400px; height: 300px; border: 1px solid #000; border-collapse: collapse; } td { width: 100px; height: 100px; border: 1px solid #000; } &lt;/style&gt; </code></pre> <p></head></p> <p><body><br> <input id="btn" type="button" value="添加表格"><br> <div id="createTb"><br> </div><br> </body><br> </html></p> <script> // 获得元素 var btn = document.getElementById('btn'); var createTb = document.getElementById('createTb'); // 点击按钮动态生成表格 btn.onclick = function () { // 动态生成一个三行四列的表格 // 判断是否已经生成了表格 if (createTb.children.length > 0) { alert('表格不能重复添加'); return; } var table = document.createElement('table'); for (var i = 0; i < 3; i++) { var tr = document.createElement('tr'); for (var j = 0; j < 4; j++) { var td = document.createElement('td'); tr.appendChild(td); } table.appendChild(tr); } createTb.appendChild(table); } </script> <pre><code> </code></pre>