如何使用jQuery將表中的編輯數據保存回數據庫

Question

我有一個表，用戶可以在其中單擊行，然后編輯該行。 我現在希望能夠將其保存回數據庫。 我怎樣才能做到這一點？ 我只是不確定如何創建ajax調用來運行它。

 // overlay functions function openOverlay(){ document.getElementById("pageOverlay").style.visibility = "visible"; } function closeOverlay(){ document.getElementById("pageOverlay").style.visibility = "hidden"; } // show row data to be edited or view single row $(".rowEditData").click(function() { html = "<div id='editableTableDiv'><label class='editRowLabel'>Shape Name:</label> <input type='text' class='mdl-textfield__input' name='shapeName' value="+ $(this).find('td').eq(0).html() + "><br><label class='editRowLabel'>Number Edges:</label> <input type='text' class='mdl-textfield__input' name='numberEdges' value="+ $(this).find('td').eq(1).html() + "><br><label class='editRowLabel'>Sum of Interior Angles:</label> <input type='text' class='mdl-textfield__input' name='sumAngles' value="+ $(this).find('td').eq(2).html() + "><br><br><input type='button' class='mdl-button mdl-js-button mdl-button--raised mdl-button--colored' value='Save' onclick='saveNewRowData()'>&nbsp;&nbsp;&nbsp;<input type='button' class='mdl-button mdl-js-button mdl-button--raised mdl-button--colored' value='Close' onclick='closeOverlay()'></div>"; $("#pageOverlay").html(html).show(); openOverlay(); }); function saveNewRowData(){ shapeName = $("input[name=shapeName]").val(); numberEdges = $("input[name=numberEdges]").val(); sumAngles = $("input[name=sumAngles]").val(); $.ajax({ url: "someURLhere.php", data: data, type: "post" }); } 

 #pageOverlay { display: none; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.25); z-index: 99; } #pageOverlay div { padding: 1%; width: 30%; height: 80%; margin: 100px; margin-left: 35%; background-color: rgb(255, 255, 255); } .editRowLabel { font-weight:bold; font-size:16px; } 

 <link href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="pageOverlay"></div> <table id="dataTable" class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp dataTable no-footer" role="grid"> <thead> <tr role="row"> <th class="mdl-data-table__cell--non-numeric sorting_asc" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Shape Name: activate to sort column descending" style="width: 401px;">Shape Name</th> <th class="mdl-data-table__cell--non-numeric sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Number Edges: activate to sort column ascending" style="width: 436px;">Number Edges</th> <th class="mdl-data-table__cell--non-numeric sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Sum of Interior Angles: activate to sort column ascending" style="width: 638px;">Sum of Interior Angles</th> </tr> </thead> <tbody> <tr class="rowEditData odd" value="7924" role="row"> <td class="mdl-data-table__cell--non-numeric sorting_1">Hexagon</td> <td class="mdl-data-table__cell--non-numeric">6</td> <td class="mdl-data-table__cell--non-numeric">null</td> </tr> <tr class="rowEditData even" value="7923" role="row"> <td class="mdl-data-table__cell--non-numeric sorting_1">null</td> <td class="mdl-data-table__cell--non-numeric">6</td> <td class="mdl-data-table__cell--non-numeric">null</td> </tr> <tr class="rowEditData odd" value="7930" role="row"> <td class="mdl-data-table__cell--non-numeric sorting_1">null</td> <td class="mdl-data-table__cell--non-numeric">3</td> <td class="mdl-data-table__cell--non-numeric">180</td> </tr> <tr class="rowEditData even" value="7931" role="row"> <td class="mdl-data-table__cell--non-numeric sorting_1">null</td> <td class="mdl-data-table__cell--non-numeric">4</td> <td class="mdl-data-table__cell--non-numeric">360</td> </tr> <tr class="rowEditData odd" value="7932" role="row"> <td class="mdl-data-table__cell--non-numeric sorting_1">null</td> <td class="mdl-data-table__cell--non-numeric">5</td> <td class="mdl-data-table__cell--non-numeric">540</td> </tr> <tr class="rowEditData even" value="7933" role="row"> <td class="mdl-data-table__cell--non-numeric sorting_1">null</td> <td class="mdl-data-table__cell--non-numeric">6</td> <td class="mdl-data-table__cell--non-numeric">120</td> </tr> <tr class="rowEditData odd" value="7934" role="row"> <td class="mdl-data-table__cell--non-numeric sorting_1">null</td> <td class="mdl-data-table__cell--non-numeric">10</td> <td class="mdl-data-table__cell--non-numeric">1440</td> </tr> <tr class="rowEditData even" value="7925" role="row"> <td class="mdl-data-table__cell--non-numeric sorting_1">Octagon</td> <td class="mdl-data-table__cell--non-numeric">8</td> <td class="mdl-data-table__cell--non-numeric">null</td> </tr> <tr class="rowEditData odd" value="7922" role="row"> <td class="mdl-data-table__cell--non-numeric sorting_1">pentagon</td> <td class="mdl-data-table__cell--non-numeric">null</td> <td class="mdl-data-table__cell--non-numeric">null</td> </tr> <tr class="rowEditData even" value="7926" role="row"> <td class="mdl-data-table__cell--non-numeric sorting_1">Pentagon</td> <td class="mdl-data-table__cell--non-numeric">null</td> <td class="mdl-data-table__cell--non-numeric">null</td> </tr> <tr class="rowEditData odd" value="7920" role="row"> <td class="mdl-data-table__cell--non-numeric sorting_1">square</td> <td class="mdl-data-table__cell--non-numeric">4</td> <td class="mdl-data-table__cell--non-numeric">null</td> </tr> <tr class="rowEditData even" value="7927" role="row"> <td class="mdl-data-table__cell--non-numeric sorting_1">Square</td> <td class="mdl-data-table__cell--non-numeric">null</td> <td class="mdl-data-table__cell--non-numeric">null</td> </tr> <tr class="rowEditData odd" value="7928" role="row"> <td class="mdl-data-table__cell--non-numeric sorting_1">Square</td> <td class="mdl-data-table__cell--non-numeric">4</td> <td class="mdl-data-table__cell--non-numeric">null</td> </tr> <tr class="rowEditData even" value="7921" role="row"> <td class="mdl-data-table__cell--non-numeric sorting_1">trapezoid</td> <td class="mdl-data-table__cell--non-numeric">4</td> <td class="mdl-data-table__cell--non-numeric">null</td> </tr> <tr class="rowEditData odd" value="7919" role="row"> <td class="mdl-data-table__cell--non-numeric sorting_1">triangle</td> <td class="mdl-data-table__cell--non-numeric">3</td> <td class="mdl-data-table__cell--non-numeric">null</td> </tr> <tr class="rowEditData even" value="7929" role="row"> <td class="mdl-data-table__cell--non-numeric sorting_1">Triangle</td> <td class="mdl-data-table__cell--non-numeric">3</td> <td class="mdl-data-table__cell--non-numeric">null</td> </tr> </tbody> </table> 

Answer 1

• 您需要連接到數據庫的一件事

• 您將需要每行ajax

  $（document）.ready（function（）{ $('#btn').click(function(e) {

    e.preventDefault(); $('#yourTable tr').each(function(i, tr) { var postData = { CoumnName : $('.row-class').val(), ColumnName : $('.row-class').val() } console.log(postData); $.ajax({ type: "post", url: "/your url", data: postData }) .done(function(response) { console.log(response); alert("Success!"); }) .fail(function(x, status, error) { alert("Error: " + error); }); }); }); 

  }）;

Answer 2

這是我想出的方法。 我只是使用一個php腳本，然后將數據保存到數據庫中。

    function saveNewRowData(){
      shapeName = $("input[name=shapeName]").val();
      numberEdges = $("input[name=numberEdges]").val();
      sumAngles = $("input[name=sumAngles]").val();
      $.ajax({
          type: "POST",
          url: "saveNewData.php",
          data: {shapeName: shapeName, numberEdges: numberEdges, sumAngles: sumAngles},
          success: function(response){

          }
      });
    }