Javascript jQuery-无法选择正确的td_Javascript_Jquery_Html_Ajax

Javascript jQuery-无法选择正确的td

javascript jquery html ajax

Javascript jQuery-无法选择正确的td,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,我似乎无法确定我的jquery出了什么问题，以至于它一直发送空数据。基本上，单击一个按钮后，我会得到一系列结果，我希望能够按edit，然后编辑该行，我可以这样做，但这些值不会进入我的ajax文章到我的api中。我认为，如果我的变量没有选择正确的td，那么就不会向ajax帖子发送任何内容 HTML: <table id="results" class="hidden" cellspacing=10px> <thead> <tr

我似乎无法确定我的jquery出了什么问题，以至于它一直发送空数据。基本上，单击一个按钮后，我会得到一系列结果，我希望能够按edit，然后编辑该行，我可以这样做，但这些值不会进入我的ajax文章到我的api中。我认为，如果我的变量没有选择正确的

td

，那么就不会向ajax帖子发送任何内容

HTML:

<table id="results" class="hidden" cellspacing=10px>
        <thead>
            <tr class = "spacing">
                <th id= "samIdTable">SAM ID</th>
                <th id= "itemDescrip">Item Description</th>
                <th id= "issuedQty">Issued QTY</th>
                <th id= "openingQty">Opening QTY</th>
                <th id= "closingQty">Closing QTY</th>
                <th id= "corruptedQty">Corrupted QTY</th>
                <th id="Remarks">Remarks</th>
            </tr>
        </thead>
        <tbody id="bResults">
        <tr class="rowdata">
         <td>hi</td>
         <td>hi</td>
         <td>hi</td>
         <td>hi</td>
         <td>hi</td>
         <td>hi</td>
         <td>hi</td>
         <td><input class="button-edit" type="submit" id="edit" value="Edit" onclick="edit(this)"></td>
        </tr>
        <tr class="rowdata">
         <td>hi</td>
         <td>hi</td>
         <td>hi</td>
         <td>hi</td>
         <td>hi</td>
         <td>hi</td>
         <td>hi</td>
         <td><input class="button-edit" type="submit" id="edit" value="Edit" onclick="edit(this)"></td>
         </tr>
        </tbody>
    </table>


山姆ID
项目说明
发出数量
期初数量
期末数量
损坏数量
评论
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好

JS代码

function edit(el){

var currentTD =  $(el).closest('tr').find('td'); // tds except the td which closest to the edit button
var samId = currentTD.find("td:nth-child(1)").val();
var itemDescrip= currentTD.find("td:nth-child(2)").val();
var issueQty = currentTD.find("td:nth-child(3)").val();
var openingQty =currentTD.find("td:nth-child(4)").val();
var closingQty = currentTD.find("td:nth-child(5)").val();
var corruptedQty = currentTD.find("td:nth-child(6)").val();
var Remarks = currentTD.find("td:nth-child(7)").val();  
var postData = { "samId": samId,  "itemDescrip": itemDescrip, "issueQty" : issueQty,
                "openQty" : openingQty, "closeQty" :closingQty, 
                "corrupQty": corruptedQty, "remarks": Remarks};
var postJSON = JSON.stringify(postData);
if ($(el).val() == 'Edit') {                  
    $.each(currentTD, function () {
         $(this).prop('contenteditable', true);

    });  
} else {
    $.each(currentTD, function () {
        $(this).prop('contenteditable', false);
    });
}
$(el).val($(el).val() == 'Edit' ? 'Save' : 'Edit');
if($(el).val() == 'Edit' ){
   $.ajax({
    url: "http://localhost:3000/api/updateRecord", // server url
    type: "POST", //POST or GET
    contentType: "application/json", // data to send in ajax format or querystring format
    data: postJSON,
    dataType : "JSON", //dataType is you telling jQuery what kind of response to expect
    success: function(response) {
        alert('success');
         if(response){
            var txt = "";
            txt += "<tr class='rowdata'><td>"+response.samID+"</td>"
                   +"<td>"+response.itemDescription+"</td>"
                   +"<td>"+response.issuedQTY + "</td>"
                   +"<td>"+response.openingQTY + "</td>"
                   +"<td>"+response.closingQTY+"</td>"
                   +"<td>"+response.corruptedQTY+"</td>"
                   +"<td>"+response.Remarks+"</td>"
                   +"</td>"+"</tr>";
         }
          if(txt != ""){
                $("#results").removeClass("hidden");
                $("#bResults").append(txt);
            }
    },
    error: function(response) {
        alert('error');
    }
});
}
}

功能编辑（el）{
var currentTD=$（el）.closest（'tr'）.find（'td'）；//除了最靠近编辑按钮的td之外的tds
var samId=currentTD.find（“td:nth-child（1）”）.val（）；
var itemsdescripp=currentTD.find（“td:n个子项（2）”）.val（）；
var issueQty=currentTD.find（“td:n子项（3）”）.val（）；
var openingQty=currentTD.find（“td:nth-child（4）”）.val（）；
var closingQty=currentTD.find（“td:nth child（5）”）.val（）；
var corruptedQty=currentTD.find（“td:nth-child（6）”）.val（）；
var备注=currentTD.find（“td:nth child（7）”）.val（）；
var postData={“samId”：samId，“itemsdescrip”：itemsdescrip，“issueQty”：issueQty，
“打开数量”：打开数量，“关闭数量”：关闭数量，
“腐蚀数量”：腐蚀数量，“备注”：备注}；
var postJSON=JSON.stringify（postData）；
如果（$（el）.val（）=='Edit'）{
$.each（当前TD，函数（）{
$（this.prop（'contenteditable'，true）；
});  
}否则{
$.each（当前TD，函数（）{
$（this.prop（'contenteditable'，false）；
});
}
$（el）.val（$（el）.val（）=='Edit'？'Save'：'Edit'）；
如果（$（el）.val（）=='Edit'）{
$.ajax({
url:“http://localhost:3000/api/updateRecord“，//服务器url
键入：“POST”、//POST或GET
contentType:“application/json”，//以ajax格式或querystring格式发送的数据
数据：postJSON，
dataType:“JSON”//dataType告诉jQuery应该得到什么样的响应
成功：功能（响应）{
警惕（“成功”）；
如果（答复）{
var txt=“”；
txt+=“”+response.samID+“”
+“”+响应。项目描述+“”
+“”+response.issuedQTY+“”
+“”+响应。打开数量+“”
+“”+响应。关闭数量+“”
+“”+响应。损坏数量+“”
+“”+响应。备注+“”
+""+"";
}
如果（txt！=“”）{
$（“#结果”）.removeClass（“隐藏”）；
$（“#bResults”）.append（txt）；
}
},
错误：函数（响应）{
警报（“错误”）；
}
});
}
}

如果需要更多的信息，一定要告诉我。先谢谢你。我不明白否决票是怎么回事，但我确实说明了如果需要更多信息，我会提供。如果没有，至少说明为什么它被否决的原因，我可以在下次改进。

你是

不要关闭

在正确的位置添加

，然后重试。

您是

不要关闭

在正确的位置添加

，然后重试。

在您的代码中

var currentTD=$（el）.最近（'tr'）。查找（'td'）

您已经使用查询选择了最近的

，该查询没有子

。此外，您无法使用

.val（）

获取td的值。请改用

.html（）

我修改了一些代码，如下所示

你的html

<table id="results" class="hidden" cellspacing=10px>
        <thead>
            <tr class = "spacing">
                <th id= "samIdTable">SAM ID</th>
                <th id= "itemDescrip">Item Description</th>
                <th id= "issuedQty">Issued QTY</th>
                <th id= "openingQty">Opening QTY</th>
                <th id= "closingQty">Closing QTY</th>
                <th id= "corruptedQty">Corrupted QTY</th>
                <th id="Remarks">Remarks</th>
            </tr>
        </thead>
        <tbody id="bResults">
        <tr class="rowdata">
         <td>1</td>
         <td>2</td>
         <td>3</td>
         <td>4</td>
         <td>5</td>
         <td>6</td>
         <td>7</td>
         <td><input class="button-edit" type="submit" id="edit" value="Edit" onclick="edit(this)"></td>
        <tr class="rowdata">
         <td>8</td>
         <td>9</td>
         <td>10</td>
         <td>11</td>
         <td>12</td>
         <td>13</td>
         <td>14</td>
         <td><input class="button-edit" type="submit" id="edit" value="Edit" onclick="edit(this)"></td>
        </tbody>
    </table>


山姆ID
项目说明
发出数量
期初数量
期末数量
损坏数量
评论
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14

还有你的javascript

function edit(el){

var currentTD =  $(el).closest('tr').find('td'); // tds except the td which closest to the edit button

var current_id = $(el).closest('tr');

var samId = current_id.find("td:nth-child(1)").html();
var itemDescrip= current_id.find("td:nth-child(2)").html();
var issueQty = current_id.find("td:nth-child(3)").html();
var openingQty =current_id.find("td:nth-child(4)").html();
var closingQty = current_id.find("td:nth-child(5)").html();
var corruptedQty = current_id.find("td:nth-child(6)").html();
var Remarks = current_id.find("td:nth-child(7)").html();  
var postData = { "samId": samId,  "itemDescrip": itemDescrip, "issueQty" : issueQty,
                "openQty" : openingQty, "closeQty" :closingQty, 
                "corrupQty": corruptedQty, "remarks": Remarks};
var postJSON = JSON.stringify(postData);
if ($(el).val() == 'Edit') {                  
    $.each(currentTD, function () {
         $(this).prop('contenteditable', true);

    });  
} else {
    $.each(currentTD, function () {
        $(this).prop('contenteditable', false);
    });
}
$(el).val($(el).val() == 'Edit' ? 'Save' : 'Edit');
if($(el).val() == 'Edit' ){
   $.ajax({
    url: "http://localhost:3000/api/updateRecord", // server url
    type: "POST", //POST or GET
    contentType: "application/json", // data to send in ajax format or querystring format
    data: postJSON,
    dataType : "JSON", //dataType is you telling jQuery what kind of response to expect
    success: function(response) {
        alert('success');
         if(response){
            var txt = "";
            txt += "<tr class='rowdata'><td>"+response.samID+"</td>"
                   +"<td>"+response.itemDescription+"</td>"
                   +"<td>"+response.issuedQTY + "</td>"
                   +"<td>"+response.openingQTY + "</td>"
                   +"<td>"+response.closingQTY+"</td>"
                   +"<td>"+response.corruptedQTY+"</td>"
                   +"<td>"+response.Remarks+"</td>"
                   +"</td>"+"</tr>";
         }
          if(txt != ""){
                $("#results").removeClass("hidden");
                $("#bResults").append(txt);
            }
    },
    error: function(response) {
        alert('error');
    }
});
}
}

功能编辑（el）{
var currentTD=$（el）.closest（'tr'）.find（'td'）；//除了最靠近编辑按钮的td之外的tds
var current_id=$（el）.最近（'tr'）；
var samId=current_id.find（“td:nth child（1）”）.html（）；
var itemsdescripp=current_id.find（“td:nth child（2）”）.html（）；
var issueQty=current_id.find（“td:nth child（3）”）.html（）；
var openingQty=current_id.find（“td:nth child（4）”）.html（）；
var closingQty=current_id.find（“td:nth child（5）”）.html（）；
var corruptedQty=current_id.find（“td:nth child（6）”）.html（）；
var-rements=current_id.find（“td:nth-child（7）”）.html（）；
var postData={“samId”：samId，“itemsdescrip”：itemsdescrip，“issueQty”：issueQty，
“打开数量”：打开数量，“关闭数量”：关闭数量，
“腐蚀数量”：腐蚀数量，“备注”：备注}；
var postJSON=JSON.stringify（postData）；
如果（$（el）.val（）=='Edit'）{
$.each（当前TD，函数（）{
$（this.prop（'contenteditable'，true）；
});  
}否则{
$.each（当前TD，函数（）{
$（this.prop（'contenteditable'，false）；
});
}
$（el）.val（$（el）.val（）=='Edit'？'Save'：'Edit'）；
如果（$（el）.val（）=='Edit'）{
$.ajax({
url:“http://localhost:3000/api/updateRecord“，//服务器url
键入：“POST”、//POST或GET
contentType:“application/json”，//以ajax格式或querystring格式发送的数据
数据：postJSON，
dataType:“JSON”//dataType告诉jQuery应该得到什么样的响应
成功：功能（响应）{
警惕（“成功”）；
function edit(el) {
    var currentTD =  $(el).closest('tr').find('td'); 
    var samId = currentTD[0].textContent;
}