如何使用jquery将编辑过的数据从表保存回数据库 [英] How to save edited data from a table back to the database with jquery
本文介绍了如何使用jquery将编辑过的数据从表保存回数据库的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个表格，用户可以点击该行，然后编辑该行。我想现在能够将其保存回数据库。我如何做到这一点？我只是不知道如何创建ajax调用来运行它。
I have a table where users can click on the row and then edit the row. I want to now be able to save it back to the database. How can I do this? I'm just not sure how to create the ajax call to run it.
// 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()'> <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>
推荐答案
这是我想出的作品。我只是使用php脚本，然后将数据保存到数据库。
Here is what I came up with that works. I just use a php script to then save the data to the database.
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){
}
});
}
这篇关于如何使用jquery将编辑过的数据从表保存回数据库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
