Question

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

表示例如：

var product = $('[name="product"]').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值必须在页面上是唯一的。）

所以有两个问题：

您正在使用find在元素中查找，但实际上您需要来自您已经查看的元素的信息

您正在使用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。

Answer 2

您可以使用eq方法：

var product = $('[name="product"]').eq(i).val();
alert(product);

但我建议您使用each方法

$( '[name="product"]' ).each( function() {
  var product = $( this ).val();
  console.log( product );
});

更新

如果您还想阅读供应商，可以修改each以接受index：

$( '[name="product"]' ).each( function( index ) {
  var product = $( this ).val();
  var vendor = $( '[name="product"]' ).eq( index ).val();
  console.log( product );
  console.log( vendor );
});

从for循环中读取同名表中的文本值

2 个答案: