Question

我有一个表，每行包含一些列，如下所示：

<table>
    <tr>
        <td>
            <select class="level1 selectLevel">
                <option value="0">Provincia</option>
                <option value="62">Aguascalientes</option>
                <option value="73">Baja California Norte</option>></select>
        </td>
        <td>
            <select class="level1 selectLevel">
                <option value="0">Provincia</option>
                <option value="62">Aguascalientes</option>
                <option value="73">Baja California Norte</option>></select>
        </td>
        <td>
            <input type="text" name="level4" /><button  class="add" type="button" >+</button>
        </td>
    </tr>

       <tr>
        <td>
            <select class="level1 selectLevel">
                <option value="0">Provincia</option>
                <option value="62">Aguascalientes</option>
                <option value="73">Baja California Norte</option>></select>
        </td>
        <td>
            <select class="level1 selectLevel">
                <option value="0">Provincia</option>
                <option value="62">Aguascalientes</option>
                <option value="73">Baja California Norte</option>></select>
        </td>
        <td>
            <input type="text" name="level4" /><button  class="add" type="button" >+</button>
        </td>
    </tr>
</table>

当我点击（+）按钮时，我试图获取每行的所有选项和输入文本的值，

我正在尝试的一些脚本如下：

$(document).on('click', ".add", function(){
        var val = $(this).closest("input").val();
        alert(val);

    });

我为此HERE

创建了一个小提琴

如果有人可以给我一些想法，那将非常有帮助

提前致谢

Answer 1

您可以这样做：

$(document).on('click', '.add', function() {
    var values = $(this).closest('tr').find('option:selected, input[type="text"]').map(function() {
        return this.value;
    }).get();
});

Here's a fiddle

Answer 2

你正在寻找这样的东西吗？ http://jsfiddle.net/ffxsuju8/1/

$(document).ready(function(){
    $('.add').on('click', function() {
        var firstSelect = $(this).closest('tr').find('.first').find('select').val();
        var secondSelect = $(this).closest('tr').find('.second').find('select').val();
        var input = $(this).closest('tr').find('input').val();
        alert('first select value = '+ firstSelect + ', second select = ' + secondSelect + ', input value = ' + input);
    });
});

为了做到这一点，我在选择值

的td元素上添加了第一和第二类

    <td class="first">
        <select class="level1 selectLevel">
            <option value="0">Provincia</option>
            <option value="62">Aguascalientes</option>
            <option value="73">Baja California Norte</option>></select>
    </td>
    <td class="second">
        <select class="level1 selectLevel">
            <option value="0">Provincia</option>
            <option value="62">Aguascalientes</option>
            <option value="73">Baja California Norte</option>></select>
    </td>

希望这有帮助！

Answer 3

$(document).on('click', ".add", function () {
    var val = $(".selectLevel",$(this).parents("tr")).eq(0).val();
    alert(val);
});

说明：

$（ <what> ， <where> ） - jQuery选择器格式，我们在{{".selectLevel"内搜索$(this).parents("tr") 1}}
$(this).parents("tr") - 搜索当前元素的父tr个节点。在我们的案例中只有一个。
.eq(0) - 因为我们得到了2个选择节点的列表，这将为我们提供返回列表中的第一个节点。

的 Fixed Fiddle

如何从一行表中获取所有选择选项和输入类型的值

3 个答案:

Here's a fiddle