添加，更新和删除jQuery代码无效

时间：2018-10-01 11:08:16

标签： jquery html

我只是jQuery的新手，所以我很难理解它。因此，我尝试了其他网站上的一些代码。当我尝试到我的浏览器。它只显示表头完全没有jQuery。我把jQuery库。不会再出现这样的错误“ ReferenceError：未定义$”。代码有问题吗？

$(function(){
    //Add, Save, Edit and Delete functions code
    $(".btnEdit").bind("click", Edit);
    $(".btnDelete").bind("click", Delete);
    $("#btnAdd").bind("click", Add);
});

function Add(){
    $("#tblData tbody").append(
        "<tr>"+
        "<td><input type='text'/></td>"+
        "<td><input type='text'/></td>"+
        "<td><input type='text'/></td>"+
        "<td><img src='person1.png' class='btnSave'><img src='person1.png' class='btnDelete'/></td>"+
        "</tr>");
     
        $(".btnSave").bind("click", Save);      
        $(".btnDelete").bind("click", Delete);
}; 
function Save(){
    var par = $(this).parent().parent(); //tr
    var tdName = par.children("td:nth-child(1)");
    var tdPhone = par.children("td:nth-child(2)");
    var tdEmail = par.children("td:nth-child(3)");
    var tdButtons = par.children("td:nth-child(4)");
 
    tdName.html(tdName.children("input[type=text]").val());
    tdPhone.html(tdPhone.children("input[type=text]").val());
    tdEmail.html(tdEmail.children("input[type=text]").val());
    tdButtons.html("<img src='person1.png' class='btnDelete'/><img src='person1.png' class='btnEdit'/>");
 
    $(".btnEdit").bind("click", Edit);
    $(".btnDelete").bind("click", Delete);
}; 
function Edit(){
    var par = $(this).parent().parent(); //tr
    var tdName = par.children("td:nth-child(1)");
    var tdPhone = par.children("td:nth-child(2)");
    var tdEmail = par.children("td:nth-child(3)");
    var tdButtons = par.children("td:nth-child(4)");
 
    tdName.html("<input type='text' id='txtName' value='"+tdName.html()+"'/>");
    tdPhone.html("<input type='text' id='txtPhone' value='"+tdPhone.html()+"'/>");
    tdEmail.html("<input type='text' id='txtEmail' value='"+tdEmail.html()+"'/>");
    tdButtons.html("<img src='person1.png' class='btnSave'/>");
 
    $(".btnSave").bind("click", Save);
    $(".btnEdit").bind("click", Edit);
    $(".btnDelete").bind("click", Delete);
};
function Delete(){
    var par = $(this).parent().parent(); //tr
    par.remove();
}; 
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="functions.js"></script>
</head>
<body>
    <button id="btnAdd”>New</button>
    <table id="tblData">          
        <thead>
            <tr>
                <th>Name</th>
                <th>Phone</th>
                <th>Email</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>
</html>

4 个答案:

答案 0 :(得分：1)

请尝试将您的代码包装在其中，以确保它在自己的作用域中，并在文档准备好进行JavaScript操作时执行：

(function($) {
    $(document).ready(function() {
        // ... your code here;
    })
})(jQuery);

答案 1 :(得分：0)

似乎找不到很好的jquery框架，因为它找不到它。

尝试在标签的src中添加“ https://code.jquery.com/jquery-3.3.1.js”。或者只是在服务器中创建.js文件。

$(function(){
    //Add, Save, Edit and Delete functions code
    $(".btnEdit").bind("click", Edit);
    $(".btnDelete").bind("click", Delete);
    $("#btnAdd").bind("click", Add);
});

function Add(){
    $("#tblData tbody").append(
        "<tr>"+
        "<td><input type='text'/></td>"+
        "<td><input type='text'/></td>"+
        "<td><input type='text'/></td>"+
        "<td><img src='person1.png' class='btnSave'><img src='person1.png' class='btnDelete'/></td>"+
        "</tr>");
     
        $(".btnSave").bind("click", Save);      
        $(".btnDelete").bind("click", Delete);
}; 
function Save(){
    var par = $(this).parent().parent(); //tr
    var tdName = par.children("td:nth-child(1)");
    var tdPhone = par.children("td:nth-child(2)");
    var tdEmail = par.children("td:nth-child(3)");
    var tdButtons = par.children("td:nth-child(4)");
 
    tdName.html(tdName.children("input[type=text]").val());
    tdPhone.html(tdPhone.children("input[type=text]").val());
    tdEmail.html(tdEmail.children("input[type=text]").val());
    tdButtons.html("<img src='person1.png' class='btnDelete'/><img src='person1.png' class='btnEdit'/>");
 
    $(".btnEdit").bind("click", Edit);
    $(".btnDelete").bind("click", Delete);
}; 
function Edit(){
    var par = $(this).parent().parent(); //tr
    var tdName = par.children("td:nth-child(1)");
    var tdPhone = par.children("td:nth-child(2)");
    var tdEmail = par.children("td:nth-child(3)");
    var tdButtons = par.children("td:nth-child(4)");
 
    tdName.html("<input type='text' id='txtName' value='"+tdName.html()+"'/>");
    tdPhone.html("<input type='text' id='txtPhone' value='"+tdPhone.html()+"'/>");
    tdEmail.html("<input type='text' id='txtEmail' value='"+tdEmail.html()+"'/>");
    tdButtons.html("<img src='person1.png' class='btnSave'/>");
 
    $(".btnSave").bind("click", Save);
    $(".btnEdit").bind("click", Edit);
    $(".btnDelete").bind("click", Delete);
};
function Delete(){
    var par = $(this).parent().parent(); //tr
    par.remove();
}; 
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="functions.js"></script>
</head>
<body>
    <button id="btnAdd">New</button>
    <table id="tblData">          
        <thead>
            <tr>
                <th>Name</th>
                <th>Phone</th>
                <th>Email</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>
</html>

答案 2 :(得分：0)

更正

上的引号 
 <button id="btnAdd">New</button>

还要确保在加载jquery之后运行js代码，请将其保留在body结束标记之前

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <button id="btnAdd">New</button>
  <table id="tblData">
    <thead>
      <tr>
        <th>Name</th>
        <th>Phone</th>
        <th>Email</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  <script>
    $(function() {
      //Add, Save, Edit and Delete functions code
      $(".btnEdit").bind("click", Edit);
      $(".btnDelete").bind("click", Delete);
      $("#btnAdd").bind("click", Add);
    });

    function Add() {
      $("#tblData tbody").append(
        "<tr>" +
        "<td><input type='text'/></td>" +
        "<td><input type='text'/></td>" +
        "<td><input type='text'/></td>" +
        "<td><img alt='Save' src='person1.png' class='btnSave'><img alt='Delete' src='person1.png' class='btnDelete'/></td>" +
        "</tr>");

      $(".btnSave").bind("click", Save);
      $(".btnDelete").bind("click", Delete);
    };

    function Save() {
      var par = $(this).parent().parent(); //tr
      var tdName = par.children("td:nth-child(1)");
      var tdPhone = par.children("td:nth-child(2)");
      var tdEmail = par.children("td:nth-child(3)");
      var tdButtons = par.children("td:nth-child(4)");

      tdName.html(tdName.children("input[type=text]").val());
      tdPhone.html(tdPhone.children("input[type=text]").val());
      tdEmail.html(tdEmail.children("input[type=text]").val());
      tdButtons.html("<img alt='Delte' src='person1.png' class='btnDelete'/><img src='person1.png' alt='Edit' class='btnEdit'/>");

      $(".btnEdit").bind("click", Edit);
      $(".btnDelete").bind("click", Delete);
    };

    function Edit() {
      var par = $(this).parent().parent(); //tr
      var tdName = par.children("td:nth-child(1)");
      var tdPhone = par.children("td:nth-child(2)");
      var tdEmail = par.children("td:nth-child(3)");
      var tdButtons = par.children("td:nth-child(4)");

      tdName.html("<input type='text' id='txtName' value='" + tdName.html() + "'/>");
      tdPhone.html("<input type='text' id='txtPhone' value='" + tdPhone.html() + "'/>");
      tdEmail.html("<input type='text' id='txtEmail' value='" + tdEmail.html() + "'/>");
      tdButtons.html("<img alt='Save' src='person1.png' class='btnSave'/>");

      $(".btnSave").bind("click", Save);
      $(".btnEdit").bind("click", Edit);
      $(".btnDelete").bind("click", Delete);
    };

    function Delete() {
      var par = $(this).parent().parent(); //tr
      par.remove();
    };
  </script>
</body>

</html>

答案 3 :(得分：0)

正如您所说的那样，您是从其他地方复制此代码的。因此，您需要进行一些更改以使其正确。

首先，您所包含的脚本必须位于本地目录中，否则您的浏览器将找不到jQuery。

 $(function(){
    //Add, Save, Edit and Delete functions code
    $(".btnEdit").bind("click", Edit);
    $(".btnDelete").bind("click", Delete);
    $("#btnAdd").bind("click", Add);
});

function Add(){
    $("#tblData tbody").append(
        "<tr>"+
        "<td><input type='text'/></td>"+
        "<td><input type='text'/></td>"+
        "<td><input type='text'/></td>"+
        "<td><img src='person1.png' class='btnSave'><img src='person1.png' class='btnDelete'/></td>"+
        "</tr>");
     
        $(".btnSave").bind("click", Save);      
        $(".btnDelete").bind("click", Delete);
}; 
function Save(){
    var par = $(this).parent().parent(); //tr
    var tdName = par.children("td:nth-child(1)");
    var tdPhone = par.children("td:nth-child(2)");
    var tdEmail = par.children("td:nth-child(3)");
    var tdButtons = par.children("td:nth-child(4)");
 
    tdName.html(tdName.children("input[type=text]").val());
    tdPhone.html(tdPhone.children("input[type=text]").val());
    tdEmail.html(tdEmail.children("input[type=text]").val());
    tdButtons.html("<img src='person1.png' class='btnDelete'/><img src='person1.png' class='btnEdit'/>");
 
    $(".btnEdit").bind("click", Edit);
    $(".btnDelete").bind("click", Delete);
}; 
function Edit(){
    var par = $(this).parent().parent(); //tr
    var tdName = par.children("td:nth-child(1)");
    var tdPhone = par.children("td:nth-child(2)");
    var tdEmail = par.children("td:nth-child(3)");
    var tdButtons = par.children("td:nth-child(4)");
 
    tdName.html("<input type='text' id='txtName' value='"+tdName.html()+"'/>");
    tdPhone.html("<input type='text' id='txtPhone' value='"+tdPhone.html()+"'/>");
    tdEmail.html("<input type='text' id='txtEmail' value='"+tdEmail.html()+"'/>");
    tdButtons.html("<img src='person1.png' class='btnSave'/>");
 
    $(".btnSave").bind("click", Save);
    $(".btnEdit").bind("click", Edit);
    $(".btnDelete").bind("click", Delete);
};
function Delete(){
    var par = $(this).parent().parent(); //tr
    par.remove();
}; 
<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>
    <button id="btnAdd">New</button> <!--in this line one error: btnAdd double quote"-->
    <table id="tblData">          
        <thead>
            <tr>
                <th>Name</th>
                <th>Phone</th>
                <th>Email</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
   </body>
  </html>

如果您的本地目录中没有它，则包括虚拟库。

希望这会有所帮助。

相关问题
最新问题