jQuery實(shí)現(xiàn)列表的增加和刪除功能

更新時(shí)間：2018年06月14日 17:07:47 作者：心晴安夏

這篇文章主要介紹了jQuery實(shí)現(xiàn)列表的增加和刪除功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

具體代碼如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery</title>
  <style>
  </style>
</head>
<body>
  <div>
    <table style="margin: 10px auto;" id="tableList">
      <thead>
        <tr>
          <th>name</th>
          <th>price</th>
          <th>delete</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>a</td>
          <td>123</td>
          <td><a href="#" rel="external nofollow" rel="external nofollow" >delete</a></td>
        </tr>
        <tr>
          <td>c</td>
          <td>3453</td>
          <td><a href="#" rel="external nofollow" rel="external nofollow" >delete</a></td>
        </tr>
      </tbody>
    </table>
  </div>
  <form>
    <table style="margin:0 auto;">
      <tr>
        <td>name</td>
        <td><input type="text" name="name"></td>
      </tr>
      <tr>
        <td>price</td>
        <td><input type="text" name="price"></td>
      </tr>
      <tr>
        <td colspan="2">
          <input type="submit" value="submit" id="add">
        </td>
      </tr>
    </table>
  </form>
<script src="../js/vendor/jquery-3.2.1.min.js"></script>
<script>
  var $tableList=$("#tableList");
  //tianjia
  $("#add").click(function(){
    var tdName= $("input[name=name]").val();
    var tdPrice = $("input[name=price]").val();
    $("<tr></tr>").append("<td>"+tdName+"</td>")
      .append("<td>"+tdPrice+"</td>")
      .append("<td><a href='#?'>delete</a></td>")
      .appendTo($("#tableList>tbody"))
      .find("a").click(function(){
       $(this).parent().parent().remove();
      });
      $("input[name=name]").val("");
      $("input[name=price]").val("");
    return false;
  })
  //delete
  $("#tableList>tbody a").click(function(){
    $(this).parent().parent().remove();
  })
</script>
</body>
</html>

總結(jié)

以上所述是小編給大家介紹的jQuery實(shí)現(xiàn)列表的增加和刪除功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

輕松學(xué)習(xí)jQuery插件EasyUI EasyUI表單驗(yàn)證
輕松學(xué)習(xí)jQuery插件EasyUI，本文的重點(diǎn)在于EasyUI表單驗(yàn)證，并告訴大家如何提交表單，感興趣的小伙伴們可以參考一下
2015-12-12
Jquery Ajax請(qǐng)求代碼(2)
總結(jié)了一下了一下$.getJSON()一些應(yīng)用，希望大家喜歡，首先我用的的是 Newtonsoft.Json.Net20.dll
2011-01-01
jquery獲取被勾選的checked(選中)的那一行的3列和4列的值
大家可能會(huì)遇到這種需求通過jquery獲取被勾選的checked的那一行的3列和4列的值，具體的實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助
2013-07-07
JQuery Ajax跨域調(diào)用和非跨域調(diào)用問題實(shí)例分析
這篇文章主要介紹了JQuery Ajax跨域調(diào)用和非跨域調(diào)用問題,結(jié)合具體實(shí)例形式分析了jQuery基于ajax的非跨域請(qǐng)求及跨域請(qǐng)求相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下
2019-04-04
jquery實(shí)現(xiàn)動(dòng)態(tài)添加附件功能
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)動(dòng)態(tài)添加附件功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-10-10
jQuery對(duì)象和DOM對(duì)象相互轉(zhuǎn)化
jQuery對(duì)象就是通過jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象。jQuery對(duì)象是jQuery獨(dú)有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；例如$("#img").attr("src","test.jpg"); 這里的$("#img")就是jQuery對(duì)象；
2009-04-04
jquery插件validate驗(yàn)證的小例子
2013-05-05
JQuery優(yōu)缺點(diǎn)分析說明
如果你還在猶豫是否要學(xué)習(xí)一個(gè)JavaScript框架，并困惑于選擇哪一個(gè)框架，那么我推薦你選擇jQuery。這并非說其它框架不好，只是jQuery可能是最穩(wěn)妥和最具回報(bào)性的選擇。
2010-06-06
深入淺出 jQuery中的事件機(jī)制
本文重點(diǎn)給大家介紹jquery中的事件機(jī)制，涉及到onload和ready兩者的區(qū)別介紹，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看下吧
2016-08-08
jquery實(shí)現(xiàn)可橫向和豎向展開的動(dòng)態(tài)下滑菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)可橫向和豎向展開的動(dòng)態(tài)下滑菜單效果,以實(shí)例形式較為詳細(xì)的分析了jquery實(shí)現(xiàn)橫向與豎向展開菜單的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-08-08