【发布时间】：2017-06-24 10:15:06
【问题描述】：
我想知道如何在使用 jquery 按下编辑后向表中的每个字段添加输入。所以基本上我在html表中有7列和7个标题，我希望能够在按下编辑按钮后编辑每个字段，该按钮将位于表格右侧的每一行。在我为该特定行的每一列添加输入字段后，一旦输入，我想使用 ajax 调用我的更新 api。这是我的html代码。
<div id="table-wrapper">
<div id="table-scroll">
<table id="results" class="hidden" cellspacing=10px>
<thead>
<tr class = "spacing">
<th>SAM ID</th>
<th>Item Description</th>
<th>Issued QTY</th>
<th>Opening QTY</th>
<th>Closing QTY</th>
<th>Corrupted QTY</th>
<th>Remarks</th>
</tr>
</thead>
<tbody id="bResults">
</tbody>
</table>
</div>
</div>
这是我连接到html的js代码。
function search(){
var samId = $('#samId').val();
var postData = { "samId": samId };
var postJSON = JSON.stringify(postData);
$.ajax({
url: "http://localhost:3000/api/queryRecord", // server url
type: "POST", //POST or GET
contentType: "application/json",
data: postJSON, // data to send in ajax format or querystring format
dataType : "JSON", //dataType is you telling jQuery what kind of
response to expect
success: function(response) {
alert('success');
if(response){
var len = response.length;
var txt = "";
if(len > 0){
for(var i=0;i<len;i++){
if(response[i].samID && response[i].itemDescription){
txt += "<tr class='rowdata'><td>"+response[i].samID
+"</td><td>"+response[i].itemDescription+"</td><td>"
+response[i].issuedQTY + "</td>
<td>"+response[i].openingQTY + "</td>
<td>"+response[i].closingQTY
+"</td><td>"+response[i].corruptedQTY+"</td>
<td>"+response[i].Remarks+"</td><td>"
+ "<input class='button-edit' type='submit'
value='Edit' onclick = 'edit()' />"
+"</td></tr>";
}
}
$("#bResults").empty();
if(txt != ""){
$("#results").removeClass("hidden");
$("#bResults").append(txt);
}
}
}
},
error: function(response) {
alert('error');
}
});
event.preventDefault();
}
function edit(){
var currentTD = $(this).parents('tr').find('td');
if ($(this).html() == 'Edit') {
$.each(currentTD, function () {
$(this).prop('contenteditable', true)
});
} else {
$.each(currentTD, function () {
$(this).prop('contenteditable', false)
});
}
$(this).html($(this).html() == 'Edit' ? 'Save' : 'Edit')
}
我的search() 工作正常，但只是想展示我的响应是如何编码的。这个edit() 基本上是我所拥有的，但我真的不知道如何使用，因为代码来自另一个问题Making row editable when hit row edit button，因为不知道如何进行此编辑并添加一个输入字段供人们使用在该特定行中进行编辑。我也使用 mongodb 作为数据库。请以更简单的方式解释它，以便我更好地理解。谢谢！
更新 按照 Mohamed-Yousef 的说法
function search(){
var samId = $('#samId').val();
var postData = { "samId": samId };
var postJSON = JSON.stringify(postData);
$.ajax({
url: "http://localhost:3000/api/queryRecord", // server url
type: "POST", //POST or GET
contentType: "application/json",
data: postJSON, // data to send in ajax format or querystring format
dataType : "JSON", //dataType is you telling jQuery what kind of
response to expect
success: function(response) {
alert('success');
if(response){
var len = response.length;
var txt = "";
if(len > 0){
for(var i=0;i<len;i++){
if(response[i].samID && response[i].itemDescription){
txt +="<tr class='rowdata'><td>"+response[i].samID+
"</td>"+<td>"+response[i].itemDescription+
"</td>"+"<td>"+response[i].issuedQTY +
"</td>"+"<td>"+response[i].openingQTY +
"</td>"+"<td>"+response[i].closingQTY+
"</td>"+"<td>"+response[i].corruptedQTY+
"</td>"+"<td>"+response[i].Remarks+"</td>"
+"<td><input class='button-edit'
type='submit' value='Edit' onclick = 'edit()'
/></td>"+"</tr>";
}
}
$("#bResults").empty();
if(txt !== ""){
$("#results").removeClass("hidden");
$("#bResults").append(txt);
}
}
}
},
error: function(response) {
alert('error');
}
});
event.preventDefault();
}
function edit(el){
var currentTD = $(el).closest('tr').find('td').not($(el).closest('td'));
if ($(this).html() == 'Edit') {
$.each(currentTD, function () {
$(this).prop('contenteditable', true)
});
} else {
$.each(currentTD, function () {
$(this).prop('contenteditable', false)
});
}
$(el).val($(el).val() == 'Edit' ? 'Save' : 'Edit')
}
似乎不起作用，仍然给出错误Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined
根据 Bryan Dellinger 的说法，我所做的另一个答案是使用 knockout.js
<table id="results" class="hidden" cellspacing=10px>
<thead>
<tr class = "spacing">
<th>SAM ID</th>
<th>Item Description</th>
<th>Issued QTY</th>
<th>Opening QTY</th>
<th>Closing QTY</th>
<th>Corrupted QTY</th>
<th>Remarks</th>
</tr>
</thead>
<tbody id="bResults" data-bind="foreach: txt">
<tr>
<td>
<!-- ko if: buttonText() === 'Save' -->
<input data-bind="textInput: samID">
<!-- /ko -->
<!-- ko if: buttonText() === 'Edit' -->
<span data-bind="text: samID"></span>
<!-- /ko -->
</td>
<td>
<!-- ko if: buttonText() === 'Save' -->
<input data-bind="textInput: itemDescription">
<!-- /ko -->
<!-- ko if: buttonText() === 'Edit' -->
<span data-bind="text: itemDescription"></span>
<!-- /ko -->
</td>
<td>
<!-- ko if: buttonText() === 'Save' -->
<input data-bind="textInput: issuedQTY">
<!-- /ko -->
<!-- ko if: buttonText() === 'Edit' -->
<span data-bind="text: issuedQTY"></span>
<!-- /ko -->
</td>
<td>
<!-- ko if: buttonText() === 'Save' -->
<input data-bind="textInput: openingQTY">
<!-- /ko -->
<!-- ko if: buttonText() === 'Edit' -->
<span data-bind="text: openingQTY"></span>
<!-- /ko -->
</td>
<td>
<!-- ko if: buttonText() === 'Save' -->
<input data-bind="textInput: closingQTY">
<!-- /ko -->
<!-- ko if: buttonText() === 'Edit' -->
<span data-bind="text: closingQTY"></span>
<!-- /ko -->
</td>
<td>
<!-- ko if: buttonText() === 'Save' -->
<input data-bind="textInput: corruptedQTY">
<!-- /ko -->
<!-- ko if: buttonText() === 'Edit' -->
<span data-bind="text: corruptedQTY"></span>
<!-- /ko -->
</td>
<td>
<!-- ko if: buttonText() === 'Save' -->
<input data-bind="textInput: corruptedQTY">
<!-- /ko -->
<!-- ko if: buttonText() === 'Edit' -->
<span data-bind="text: corruptedQTY"></span>
<!-- /ko -->
</td>
<td>
<!-- ko if: buttonText() === 'Save' -->
<input data-bind="textInput: Remarks">
<!-- /ko -->
<!-- ko if: buttonText() === 'Edit' -->
<span data-bind="text: Remarks"></span>
<!-- /ko -->
</td>
<td><button data-bind="text: buttonText, click: $parent.click">
</button></td>
</tr>
</tbody>
</table>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/mainpage.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-
min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1
/knockout.mapping.min.js"></script>
这是js
function search(){
var samId = $('#samId').val();
var postData = { "samId": samId };
var postJSON = JSON.stringify(postData);
$.ajax({
url: "http://localhost:3000/api/queryRecord", // server url
type: "POST", //POST or GET
contentType: "application/json",
data: postJSON, // data to send in ajax format or querystring format
dataType : "JSON", //dataType is you telling jQuery what kind of response to expect
success: function(response) {
alert('success');
if(response){
var len = response.length;
var txt = "";
if(len > 0){
for(var i=0;i<len;i++){
if(response[i].samID && response[i].itemDescription){
txt = [{
"samID": response[i].samID,
"itemDescription":response[i].itemDescription,
"issuedQTY": response[i].issuedQTY,
"openingQTY": response[i].openingQTY,
"closingQTY": response[i].closingQTY,
"corruptedQTY": response[i].corruptedQTY,
"editMode" : false,
"Remarks": response[i].Remarks,
"buttonText": "Edit"
}]
}
}
$("#bResults").empty();
if(txt != ""){
$("#results").removeClass("hidden");
$("#bResults").append(txt);
}
}
}
},
error: function(response) {
alert('error');
}
});
event.preventDefault();
}
【问题讨论】：
-
我只是把它作为评论，因为您只请求一个 jquery 解决方案。但是带有knockoutjs的jquery使这种事情变得非常容易。我创建了一个小提琴，您可以在其中单击编辑并更新字段。 jsfiddle.net/0o89pmju/2
-
@BryanDellinger 您好，我不太了解您的
viewModel()函数如何在此代码中触发它。名称是否重要，或者我可以将其更改为另一个名称并且我必须绑定到点击吗？不介意，但你能给我解释一下吗？ -
确定 knockoutjs 是一个 MVVM 框架。模型视图视图模型。视图模型是模型（在这种情况下是我称为项目的表的原始数据。和视图（html）。视图模型允许两种方式绑定，这使得动态操作。有一个很好的和善良的有趣的互动教程在这里。learn.knockoutjs.com
-
@BryanDellinger 是否需要下载任何其他东西，因为它给了我
undefined ko？ -
你需要knockoutjs 库，可能还需要knockout 映射库。 （如果你在外部资源中找到我的小提琴，你可以在那里看到他们的 CDN）cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js 和 cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/…
标签： jquery html knockout.js