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

Posted 2023-05-09

【中文标题】我无法使用 jQuery 发布特定行并获取字段的值，我获取第一行的值而不是提交的行

【英文标题】：i cannot post a specific row and get value of the fields using jQuery, i get value of first row not the submitted row

【发布时间】：2016-04-03 03:32:57

【问题描述】：

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

<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>

【问题讨论】：

你为什么使用空的id属性

【参考方案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 只是选定的索引（行））。

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

              );
          

【讨论】：

发布时出错，“selectedIndex 未定义”，

请帮忙看看 selectedIndex 是什么？

发布时出错，“selectedIndex 未定义”，

我还在烦恼，jsp应该提交一行这样我们就不需要在参数中发送counter，它们应该只有1个id，只有1个城市可以访问，有吗有什么办法吗？？

不，你真的应该有唯一的变量。它不适用于只有 1 个 id 和 1 个城市，因为 javascript 只会找到第一行 id 并提交它们，这不是你想要的。