java - 我无法发布特定行并使用 jQuery 获取字段的值，我获取第一行的值而不是提交的行

Question

这是我的jsp!我提供了一个编辑按钮来使用ajax更新城市，我想提交该特定行并获取该特定行的值(例如“id &city”)以在数据库中更新，无论我提交第一行还是其他行，我只是得到第一个值，您帮助可以理清我的概念，提前感谢!

<table class="table table-responsive" style="width: 50%">
                        <thead>
                              <tr>
                                <th style = "text-align: center;">Id</th>
                                <th style = "text-align: center;">City Name</th>
                                <th style = "text-align: center;">Changes</th>
                              </tr>
                        </thead>
                        <tbody>
                            <c:forEach items="${CityList}" var = "ctable">
                              <form:form id="updatecity">
                                  <tr>
                                    <td id="" style = "text-align: center;">
                                        <input type="hidden" id="id" value="${ctable.id}">
                                        <c:out value="${ctable.id}"></c:out>
                                    </td>
                                    <td id="" style = "text-align: center;">
                                        <input type="hidden" id="city" value="${ctable.city}">
                                        <c:out value="${ctable.city}"></c:out>
                                    </td>
                                    <td style = "text-align: center;">
                                        <button type="button" class="btn btn-default editbtn">Edit</button>
                                    </td>
                                  </tr>
                              </form:form>
                            </c:forEach>
                        </tbody>
                    </table>

这是我的 JQuery!

<script>
$(document).ready(function () {
$('.editbtn').click(function() 
{
    var $this = $(this);
    var tds = $this.closest('tr').find('td').filter(function() {
        return $(this).find('.editbtn').length === 0;
    });
    if ($this.html() === 'Edit') {
        $this.html('Save');
        tds.prop('contenteditable', true);
    } else {
            $this.html('Edit');
            tds.prop('contenteditable', false);

               var form = $('#updatecity');
               var id = document.getElementById("id").textContent;
               var city = document.getElementById("city").textContent;
               var formData = "id="+id+"&city="+city;
               alert(id + city);
               alert(formData);

            $.ajax({
                    url:  'updatecity',
                    type: 'POST',
                    data: formData,
                    success: function (data){
                         alert('Data submitted successfully!');
                             var result=data;
                             $('#result').attr("value",result);
                         },
                         error:function (data){
                                alert('There was an error to submit data');
                         }

                  });
           }    
});


});
</script>

Answer 1

您需要为每一行使用唯一的变量名称(注意 Counter.index)。

 <c:forEach items="${CityList}" var = "ctable" varStatus="Counter">
                          <form:form id="updatecity">
                              <tr>
                                <td id="" style = "text-align: center;">
                                    <input type="hidden" id="id${Counter.index}" value="${ctable.id}">
                                    <c:out value="${ctable.id}"></c:out>
                                </td>
 <td id="" style = "text-align: center;">
                                    <input type="hidden" id="City${Counter.index}" value="${ctable.city}">
                                    <c:out value="${ctable.city}"></c:out>
                                </td>
                                <td><button type="button"
               onclick="postRow(${Counter.index})"   value="Post value"></button></td>

现在您仍然需要更改 jS 代码来检索所选行(selectedIndex 只是所选的 indeks(row))。

 var id = document.getElementById("id"+selectedIndex).textContent;
 var city = document.getElementById("city"+selectedIndex).textContent;

编辑:我已经更新了我的答案。您应该为每一行添加一个按钮，并向其附加一个将提交所选行的单击事件。

function postRow(selectedIndex){
var $this = $(this);
var tds = $this.closest('tr').find('td').filter(function() {
    return $(this).find('.editbtn').length === 0;
});
if ($this.html() === 'Edit') {
    $this.html('Save');
    tds.prop('contenteditable', true);
} else {
        $this.html('Edit');
        tds.prop('contenteditable', false);

           var form = $('#updatecity');
           var id = document.getElementById("id"+selectedIndex).textContent;
           var city = document.getElementById("city"+selectedIndex).textContent;
           var formData = "id="+id+"&city="+city;
           alert(id + city);
           alert(formData);

        $.ajax({
                url:  'updatecity',
                type: 'POST',
                data: formData,
                success: function (data){
                     alert('Data submitted successfully!');
                         var result=data;
                         $('#result').attr("value",result);
                     },
                     error:function (data){
                            alert('There was an error to submit data');
                     }

              });
       }   

}