Question

这是我的小提琴： http://jsfiddle.net/jd5pgdz2/4/

当我尝试添加与我的表中名称相同的用户时（显示的两个用户在我的html中是静态的），它仍然允许我添加它。我正在使用包来检查表中是否已存在用户名，方法是在创建按钮单击时从文本框中获取值。根据我的代码，只有在表中不存在该用户名时才应该添加它。但是，它不会让我这样做。

这是我的jquery： -

$(document).find("button").button();
$("#create").click(function(){
     var userNamePresentInTable=$("#usr").val();
    if($("table:contains('" + userNamePresentInTable + "')").text() === userNamePresentInTable){
        //$("#error").text(userNamePresentInTable);
      $("#error").text("user already exists");
    }else{

    var tr=$('<tr></tr>');
    var enteredVal=$("#usr").val();

    var td_username=$('<td></td>',{
        text:  $("#usr").val()
    }).addClass("editableFields").appendTo(tr);

    var td_level=$('<td></td>', {
        text: "User"
    }).appendTo(tr);

    var td_buttons=$('<td></td>',{
        html: '<button class="edit">Edit</button> <button class="del">Delete</button> <button class="apply">Apply</button>'
    }).appendTo(tr);

    $(tr).find("button").button();
    $(".userTable").append(tr);
    }
});

    /*For old data already present in the table*/
    $(document).on("click",".edit",function(){
        var currentItem = $(this).parents("tr").find("td");
            $.each(currentItem, function(){
                if($(this).hasClass("editableFields")){
                $(this).prop("contenteditable",true);
                $(this).css("border-color","red");
                }
            });
    });

    $(document).on("click",".del",function(){
       var currentItem=$(this).parents("tr").find("td");
        $.each(currentItem,function(){
            $(this).remove();
        });
    });

    $(document).on("click",".apply",function(){
        var currentItem=$(this).parents("tr").find("td");
        $.each(currentItem,function(){
            $(this).prop("contenteditable",false);
            $(this).css("border-color","");
        });

    });

这是我的HTML：

    <table class="userTable">
    <tr>
        <th class="uName">Username</th>
        <th class="uLevel">Level</th>
        <th class="uOpt">Options</th>
    </tr>

    <tr>
        <td class="editableFields">User 1</td>
        <td> User</td>
        <td><button class="edit">Edit</button>
            <button class="del">Delete</button>
            <button class="apply">Apply</button></td>
    </tr>

    <tr>
        <td class="editableFields">User 2</td>
        <td> User</td>
        <td><button class="edit">Edit</button>
            <button class="del">Delete</button>
            <button class="apply">Apply</button></td>
    </tr>

</table>
    <div class="clear"></div> <div class="clear"></div>
       <p>Add User</p>
       <div class="clear"></div>
        <label for="usr">Username</label>
        <input type="text" name="usr" id="usr">
        <label for="pwd">Password</label>
           <input type="password" name="pwd" id="pwd">
          <button id="create">Create</button>
         <div id="error">
           </div>

Answer 1

这是我更新的小提琴：http://jsfiddle.net/jd5pgdz2/5/

var userNamePresentInTable=$("#usr").val();
    if($("td:contains('" + userNamePresentInTable + "')").text() === userNamePresentInTable){
        //$("#error").text(userNamePresentInTable);
      $("#error").text("user already exists");
    }else{

基本上在我的if语句中使用td替换table之前的表就可以了。

无法阻止与表中具有相同名称的用户使用jquery包含check进行添加

1 个答案: