Question

我想在ajax中输入单击行编辑按钮的输入。但是我总是得到第一行的输入。这是我的HTML代码：

<table class="table table-striped" id = "cardTable">
            <thead>
                <tr>
                    <th>expression</th>
                    <th>type</th>
                    <th>edit card</th>
                </tr>
            </thead>
            <tbody>

                <c:forEach var="card" items="${cards}">
                    <tr>

                        <td>${card.expression}</td>
                        <td>${card.cardType.name} <input id="card" name="card" type="hidden" value="${card.id }"></td>

                        <!--<td><button data-toggle="modal" data-target="#cardUpdate" class="btn btn-primary">Edit</Button></td>-->
                        <td><button onclick="addAttribute()" class="btn-primary">edit</button></td>
                    </tr>
                </c:forEach>
            </tbody>

</table>

这是我的ajax代码：

function addAttribute() {
var card = $('#card').closest("tr").parent('td').find('input[name=name]').val();
$.ajax({
    type:"GET",
    url: contexPath + "/getUpdatableCard",
    data:"card=" + card,
    dataType:'json',
    contentType : "application/json",
    success:function(data) {
        $("#cardUpdate").modal("show");
        alert(data.id);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        alert(textStatus + ': ' + errorThrown);
        }
});

}

有人可以帮我吗？

Answer 1

您有多个这样的元素：

<input id="card" ...

重复id是无效的HTML，因此技术上未定义此行为：

$('#card')

此可能是浏览器特定的，但这里似乎发生的是它将第一个元素与id匹配。您需要使用有效的HTML并相应地调整选择器以匹配所有这些。像这样：

<input class="card" ...

和

$('.card')

然而，首先并非完全必要。因为当您点击按钮时，您只需要input 相对于该按钮，因此您不想选择{{>所有的{{无论如何，1}}元素。（即使你这样做了，只要你打电话input，你仍然只能解决匹配集中的第一个问题。）

基本上，我认为你想要这样的东西：

.val()

也就是说，从var card = $(this).closest('tr').find('input[name=name]').val();开始，您遍历到包含this，然后在其中找到<tr>。（虽然我在你的代码中没有看到input[name=name]。也许是一个错字？）

从表中获取ajax中的输入值 - spring mvc

1 个答案: