91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

基于jQuery獲取table數據發送到后端

發布時間:2020-09-26 10:11:03 來源:腳本之家 閱讀:357 作者:遍唱陽春 欄目:編程語言

1.我做的是一個動態表格,就是在輸入框里每輸入一次數據并點擊“添加”按鈕,表格中就會新增一行記錄。

<table id="stu_prize_tab" class="stu_prize_tab" border="1px solid" cellspacing="0" cellpadding="0">
              <caption class="prize_title">獲獎記錄表</caption>
              <tr>
                <th>編號</th>
                <th>獎項名稱</th>
                <th>獲獎年份</th>
                <th>操作</th>
              </tr>

            </table>
            <input type="button" id="save_3" value="保存">
            <span id="save_res" ></span>
<script>
      //添加
      //1.獲取按鈕
      var ele_add = document.getElementById("btn_add");
      //2.綁定事件
      ele_add.onclick = function () {
        //3.獲取輸入框內容,注意得到元素要繼續獲取value才是內容
        var pid = document.getElementById("pid").value;
        var pname = document.getElementById("pname").value;
        var pyear = document.getElementById("pyear").value;
        //4.獲取表格,注意得到的是數組,要加上索引才是表格元素
        var ele_table = document.getElementsByTagName("table")[0];
        ele_table.innerHTML += "<tr>\n" +
          "        <td>" + pid + "</td>\n" +
          "        <td>" + pname + "</td>\n" +
          "        <td>" + pyear + "</td>\n" +
          "        <td><a class=\"del_a\" href=\"javascript:void(0);\" onclick=\"delTr(this);\">刪除</a></td>\n" +
          "      </tr>";
      };
      //刪除
      //編寫刪除方法
      function delTr(obj) {
        //獲取表格
        var table = obj.parentNode.parentNode.parentNode;
        //獲取tr
        var tr = obj.parentNode.parentNode;
        //刪除tr
        table.removeChild(tr);
      }
    </script>

2.給“保存”按鈕添加點擊事件,點擊按鈕之后,獲取每一行的數據并以參數的形式發送ajax的post請求。

$(function () {
        $("#save_3").click(function () {//一條一條加入記錄
          var trList = $("#stu_prize_tab").find("tr");
          //表頭不用,所以i從1開始
          for (var i = 1; i < trList.length; i++) {
            var trArr=trList.eq(i);
            var pno = trArr.children("td").eq(0).text();//獲獎編號
            var pname = trArr.children("td").eq(1).text();//獲獎名稱
            var pyear = trArr.children("td").eq(2).text();// 獲獎年份
            $.post("stuPrizeServlet",{pno:pno,pname:pname,pyear:pyear}, function (data) {
              //處理服務器響應的數據data flag:true errorMsg:注冊成功
              if (data.flag) {
                //如果注冊成功,跳轉到成功頁面
                $("#save_res").html("保存成功!");
                // location.href = "http://localhost/suiningAdmissions/category4_5.html";
                // alert("保存成功!")
              } else {
                //注冊失敗
                $("#errorMsg").html(data.errorMsg);
              }

            },"json");
          }
        });

      })

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

盱眙县| 伊宁县| 铜陵市| 小金县| 景谷| 札达县| 民县| 屯留县| 巫山县| 拜泉县| 永兴县| 南华县| 高平市| 安福县| 东安县| 莱芜市| 沂源县| 鄂伦春自治旗| 合水县| 正镶白旗| 当涂县| 龙南县| 金湖县| 保德县| 黎城县| 华池县| 苗栗市| 紫云| 广南县| 大新县| 榆社县| 额济纳旗| 贵州省| 依安县| 临夏县| 耒阳市| 二连浩特市| 门源| 扎赉特旗| 鄯善县| 涿州市|