无重复无刷新添加数据

    <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>

 

转载于:https://www.cnblogs.com/danznb/p/3470213.html