Question

我的表看起来像这样：

<table class="tg">
<tr>
    <th class="tg-031e"></th>
    <th class="tg-031e"></th>
    <th class="tg-031e"></th>
    <th class="tg-031e"></th>
</tr>
<tr>
    <td class="tg-031e"><span class="display-mode" />
        <input class="edit-mode max" value="1" />
    </td>
    <td class="tg-031e"><span class="display-mode" />
        <input class="edit-mode min" value="2" />
    </td>
    <td class="tg-031e"><span class="display-mode" />
        <input class="edit-mode width" value="3" />
    </td>
    <td class="tg-031e">
        <button name="Klickmich" type="button" value="Überraschung">Foo</Button>
    </td>
</tr>
<tr>
    <td class="tg-031e"><span class="display-mode" />
        <input class="max edit-mode" value="4" />
    </td>
    <td class="tg-031e"><span class="display-mode" />
        <input class="min edit-mode" value="5" />
    </td>
    <td class="tg-031e"><span class="display-mode" />
        <input class="edit-mode width" value="6" />
    </td>
    <td class="tg-031e">
        <button name="Klickmich" type="button" value="Überraschung">Foo</Button>
    </td>
</tr>
<tr>
    <td class="tg-031e"><span class="display-mode" />
        <input class="edit-mode max" value="7" />
    </td>
    <td class="tg-031e"><span class="display-mode" />
        <input class="edit-mode min" value="8" />
    </td>
    <td class="tg-031e"><span class="display-mode" />
        <input class="edit-mode width" value="9" />
    </td>
    <td class="tg-031e">
        <button name="Klickmich" type="button" value="Überraschung">Foo</Button>
    </td>
</tr>

当用户点击我要保存/获取所点击行中输入值的值时。

我是这样做的：

   $("button").click(function () {

    var min = jQuery("input#min").val();
    var max = jQuery("input#max").val();
    var width = jQuery("input#width").val();

    console.log(currentClass);
    console.log(min);
    console.log(max);
    console.log(width);
});

使用此代码我只获得第一行的值。我应该从点击的行中修改值。例如，如果用户点击第三行，则值应为7,8,9。

此外，我想知道为什么我使用$（this）.parents（＆＃39; tr＆＃39;）按钮上下文而不是jquery中的tr上下文。

有人有一个很好的解决方法吗？代码也在这里http://jsfiddle.net/zW5KC/1/

Answer 1

使用closest()查找父tr，然后使用find()获取该tr中的特定元素，如下所示：

$("button").click(function () {
    var min = jQuery(this).closest("tr").find("#min").val();
    var max = jQuery(this).closest("tr").find("#max").val();
    var width = jQuery(this).closest("tr").find("#width").val();


    console.log(min);
    console.log(max);
    console.log(width);
});

Answer 2

好的，首先你的ID应该是唯一的，所以我把它们改成了类。

其次，当你尝试var min = jQuery("input#min").val();找到一个id为min的输入时，不过它只是在页面上找到第一个，它不知道你想要哪一个。

所以我已经更新了使用this的代码，在这种情况下引用了您点击的实际按钮元素。从那里我们找到最近的父母tr，然后从那里找到一个具有正确班级的孩子。代码;

<table class="tg">
<tr>
    <th class="tg-031e"></th>
    <th class="tg-031e"></th>
    <th class="tg-031e"></th>
    <th class="tg-031e"></th>
</tr>
<tr>
    <td class="tg-031e"><span class="display-mode" />
        <input class="max" class="edit-mode" value="1" />
    </td>
    <td class="tg-031e"><span class="display-mode" />
        <input class="min" class="edit-mode" value="2" />
    </td>
    <td class="tg-031e"><span class="display-mode" />
        <input class="width" class="edit-mode" value="3" />
    </td>
    <td class="tg-031e">
        <button name="Klickmich" type="button" value="Überraschung">Foo</Button>
    </td>
</tr>
<tr>
    <td class="tg-031e"><span class="display-mode" />
        <input class="max" class="edit-mode" value="4" />
    </td>
    <td class="tg-031e"><span class="display-mode" />
        <input class="min" class="edit-mode" value="5" />
    </td>
    <td class="tg-031e"><span class="display-mode" />
        <input class="width" class="edit-mode" value="6" />
    </td>
    <td class="tg-031e">
        <button name="Klickmich" type="button" value="Überraschung">Foo</Button>
    </td>
</tr>
<tr>
    <td class="tg-031e"><span class="display-mode" />
        <input class="max" class="edit-mode" value="7" />
    </td>
    <td class="tg-031e"><span class="display-mode" />
        <input class="min" class="edit-mode" value="8" />
    </td>
    <td class="tg-031e"><span class="display-mode" />
        <input class="width" class="edit-mode" value="9" />
    </td>
    <td class="tg-031e">
        <button name="Klickmich" type="button" value="Überraschung">Foo</Button>
    </td>
</tr>

<script type="text/javascript">
   $("button").click(function () {
        var $row = $(this).closest('tr');
        var min = $row.find('.min').val();
        var max = $row.find('.max').val();
        var width = $row.find('.width').val();

        console.log(currentClass);
        console.log(min);
        console.log(max);
        console.log(width);
    });
</script>

使用jquery从单击的行输入值中获取

2 个答案: