javascript - 在 for 循环中从同名表中读取文本值

Question

我正在创建在线购物车。因为我通过 jquery/json GET 从我的 spring/hibernate 获取值，并且它运行没有问题。我在 js 类中添加它们时遇到一些错误，现在我只想按名称读取每行文本框的值。

例如:

var 产品 = $('[name="产品"]').val(); var vendor = $('[name="vendor "]').val();

<table style="width: 90%; margin: 15px;">
                <thead>
                    <tr style="border-bottom: 2px solid gray;">
                        <th style="float: left; text-align: left !important" width="50%">Product
                            Details</th>
                        <th style="float: left; text-align: left !important" width="25%">Vendor</th>
                        <th style="float: left; text-align: left !important" width="20%">Quantity</th>
                        <th style="float: left; text-align: left !important" width="5%"></th>
                    </tr>
                </thead>
                <tbody id="tbdyProducts"
                    style="min-height: 300px; max-height: 300px; overflow: auto; display: block;">
                    <tr>
                        <td style="padding-top: 15px; float: left; width: 350px"><span
                            id="product1" name="product">Xperia M Dual</span></td>
                        <td style="padding-top: 15px; float: left; width: 190px"><span
                            id="vendorname1" name="seller" style="height: 20px">sample
                                vendorname</span></td>
                        <td style="padding-top: 15px; float: left; width: 100px"><input
                            type="text" id="proqty1" name="proqty" size="5"
                            style="height: 20px; text-align: center" value=""></td>
                        <td align="right" valign="bottom" style="width: 55px"><span
                            id="deleteRow" onclick="ProductRemove(1)" class="deleteRow"
                            style="cursor: pointer; cursor: hand">X</span><input type="hidden"
                            id="hsrate1" name="hsrate" value="250.50"></td>
                    </tr>

                    <tr>
                        <td style="padding-top: 15px; float: left; width: 350px"><span
                            id="product2" name="product">Mouse</span></td>
                        <td style="padding-top: 15px; float: left; width: 190px"><span
                            id="vendorname2" name="seller" style="height: 20px">a valid
                                company or vendor name</span></td>
                        <td style="padding-top: 15px; float: left; width: 100px"><input
                            type="text" id="proqty2" name="proqty" size="5"
                            style="height: 20px; text-align: center" value=""></td>
                        <td align="right" valign="bottom" style="width: 55px"><span
                            id="deleteRow" onclick="ProductRemove(2)" class="deleteRow"
                            style="cursor: pointer; cursor: hand">X</span><input type="hidden"
                            id="hsrate2" name="hsrate" value="3.00"></td>
                    </tr>


                    <tr id="productSearch" style="display: none;">
                        <td style="padding-top: 15px; float: left; width: 350px"><span
                            role="status" aria-live="polite" class="ui-helper-hidden-accessible">1
                                result is available, use up and down arrow keys to navigate.</span><input
                            type="text" id="productfinder" size="40" style="height: 20px"
                            autocomplete="off" placeholder="Product Name or Code"
                            class="ui-autocomplete-input"></td>
                        <td style="padding-top: 15px; float: left; width: 190px"><span
                            id="vendorname" style="height: 20px"> </span></td>
                        <td style="padding-top: 15px; float: left; width: 100px"><input
                            type="text" size="5" id="productnos"
                            style="height: 20px; text-align: center"></td>
                        <td align="right" valign="bottom" style="width: 55px"><span>X</span></td>
                    </tr>
                </tbody>
            </table>

我尝试了这样的方法，但没有成功:

for(i=0; i< $('[name="product"]').length; i++){
    var product = $(this).find('[name="product"]').val();
    alert(product);
}

Answer 1

请注意，您的 HTML 无效(以多种方式):表格单元格元素没有 name 或 value 属性。如果您想在属性中放入任意信息，请使用 data-* 属性。 (您还在多个元素上使用相同的 id；id 值必须在页面上是唯一的。)

有两个问题:

1. 您正在使用 find 在元素内查找，但实际上您想要从已查看的元素中获取信息

2. 您正在使用 val，但相关元素不是表单字段。它可能有效，但如果是这样，它就没有文档记录。

简单、可靠的方法是使用 each和 attr :

$('[name="product"]').each(function() {
    alert($(this).attr("value"));
});

如果您想要一组值而不是警报，map和 get :

var values = $('[name="product"]').map(function() {
    return $(this).attr("value");
}).get();

但是，如果您想添加任意属性，则需要使用data-name 和data-value。