jQuery-无法选择合适的td

时间：2017-06-29 07:31:20

标签： javascript jquery html ajax

我似乎无法确定我的jquery出了什么问题，以至于它不断发送空数据。基本上，点击一个按钮后，我得到了一堆结果，我希望能够按下编辑然后编辑我可以做的那一行但是这些值不会进入我的apj的ajax帖子。我认为我的变量不是选择正确的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>

JS CODE 

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');
    }
});
}
}

请告诉我是否需要其他信息。先感谢您。不知道什么是downvotes，但我确实说明了是否需要其他信息，我将提供。如果没有，至少说明为什么它被投票的原因，我可以在下次改进它。

3 个答案:

答案 0 :(得分：1)

在您的代码var currentTD = $(el).closest('tr').find('td');中，您已经选择了最近的<td>查询，其中没有子<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>

和你的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');
    }
});
}
}

希望它能奏效。

答案 1 :(得分：1)

在获取currentTD后，我没有使用find，而是将其用作数组。

请查看jsfiddle https://jsfiddle.net/jkpjjmeu/ 

function edit(el) {
    var currentTD =  $(el).closest('tr').find('td'); 
    var samId = currentTD[0].textContent;
}

答案 2 :(得分：0)

你<tr>不要关闭！

在正确的位置添加</tr>，然后重试。

相关问题
最新问题