无重复无刷新添加数据
<script src="jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(function () { $(':button').click(function () {//获取所有type="button"的<input>元素,添加click事件 var text = $(':text').val();//获取所有type="text"的<input>元素的值 var has = false; $('.tab tr td').each(function () { if (this.innerHTML == text) {//innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML,在此为<td></td>中值 has = true; } }); if (!has) { $('.tab').append('<tr><td>' + text + '</td></tr>');//append() 方法在被选元素的结尾(仍然在内部)插入指定内容, } else { alert("该字段已被添加,请勿重复添加");//弹出错误 } }); }); </script>
<form id="form1" runat="server"> <div> <input type="text" id="txt" /> <input type="button" id="btn" value="Add" /> <table id="tab" class="tab"></table> </div> </form>