Question

伙计我之前问了类似这样的问题因为我无法解决我的问题我决定问一个详细的问题。请参考我的图片

Table, containing input fields

正如我在图像中提到的，我需要识别特定的表行索引值或索引字段的数量以启用特定容量，单价，数量字段并显示小计。我尝试了一些javascript和jq表行检测代码并且他们完成了这项工作，但是它们对于容量选择字段产生了影响，因为每次单击或选择时容量字段都会重置为空白。

我试了整整2天，但仍无法解决问题:(

这是完整的代码集 - http://jsfiddle.net/Ceylo/AE2Mb/

请帮我解决这个问题。

Answer 1

假设您将此作为$('td').click()的回调：

$(this).parent().find('td:first').text()

或

$(this).closest('tr').find('td:first').text()

以下是jsfiddle示例

Answer 2

可能有更优雅的方法，但为什么不只是为每个tr元素添加一个包含行索引的id？您正在动态创建它们，因此只需使用计数器在创建时分配ID。

Answer 3

例如，您可以在click或change事件上使用jQuery导航到相对于textarea的第一行。

所以，如果您的标记是这样的：

<tr>
 <td> Row # </td>
 ...
 <td><input type="text" /></td>
</tr>

您可以使用此（伪代码）

$(input).click(function() {
    var me = $(this),
    index = parseInt(me.getParent().children()[0].innerHTML);
  })

注意导航的工作原理，当文本框中捕获到单击事件时，“this”将引用该文本框。因此，您可以导航到其父级（tr），然后导航到tr的第一个子级（带行号的td），并获取其innerHTML，将其转换为int。

Answer 4

如果您想要在更改元素时识别它：

<击>

jQuery("#myselect").change(function(){
    var tableBody = jQuery(this).closest("tbody"); // Find the parent table body tag
    var thisrow = jQuery(this).closest("tr"); // Find the parent row tag

    var rowid = tableBody.children().index(thisRow);
    alert(rowid);
 });

<击>

jsFiddle：http://jsfiddle.net/JE8kR/

<强>更新

遵循RobG的建议：

jQuery("#myselect").change(function(){
    var thisrow = jQuery(this).closest("tr"); // Find the parent row tag

    alert(thisrow.eq(0).rowIndex);
 });

Answer 5

检查一下。希望它可以提供帮助：

http://jsfiddle.net/chukhanhvan/pSjHc/1/

Answer 6

这是一个工作示例 - 您希望它做的最多。为简洁起见，我省略了处理产品的默认选择等 - 因此，如果您为产品选择“选择”选项，您将收到错误。理想情况下，您可以使用某种模板并根据您的数据结构渲染产品选项...

在jsFiddle http://jsfiddle.net/Michal/Nubqj/

上

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <title>Table Rows</title>
        <script>
            $(document).ready( function() {



                //you need some sort of data struct if price and capacity varies per product
                inventory  = [{
                    name:"Product 1",
                    capacities:[{
                        "cap":4,
                        "price": 39.95
                    },{
                        "cap":8,
                        "price": 49.95
                    },{
                        "cap":16,
                        "price": 59.95
                    }]

                },{
                    name:"Product 2",
                    capacities:[{
                        "cap":32,
                        "price": 19.95
                    },{
                        "cap":64,
                        "price": 29.95
                    },{
                        "cap":128,
                        "price": 39.95
                    }]

                }]
                var parentEl; //element which will hold your row DOM reference

                $(".prod").change( function() {
                    html = "";

                    productIndex =this.selectedIndex-1

                    //build the appropriate capacity dropdown
                    for (i = 0;i<inventory[productIndex].capacities.length;i++){
                        html += "<option value='"+inventory[productIndex].capacities[i].price+"'>"+inventory[productIndex].capacities[i].cap+"</option>";
                    }
                    //find the row to update

                    parentEl = $(this).closest("tr");


                    capacity = parentEl.find(".capacity")
                //update capacity dropdown  and append html
                    capacity.html(html)
                    //enable capacity dropdown
                    capacity.attr("disabled",false)
                    //i am assuming that initialy the price will be the price of the first element in the capacity list
                    price = inventory[productIndex].capacities[0].cap;
                    //update the price column
                    parentEl.find(".price").attr("disabled", false).val(price);
                    //do the total - in this case you might want to calculate the total based on qty - I will leave it up to you to implement
                    parentEl.find(".total").text(price);
                })
                //update the price based on capacity
                $(".capacity").change(function(){
                        parentEl = $(this).closest("tr");
                        //which product are we looking at
                        productIndex = parentEl.find(".prod").selectedIndex;
                        capIndex = this.selectedIndex-1;
                        //you can find the price either from your data struct 
                        //price = inventory[productIndex].capacities[capIndex].cap;
                        //..or a value of a select
                        price = $(this).val();
                        parentEl.find(".price").attr("disabled", false).val(price);
                })
            })
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>Items</td>
                <td>Capacity</td>
                <td>Price</td>
                <td>Total</td>
            </tr>
            <tr>
                <td>
                <select class="prod">
                    <option value="">Select..</option>
                    <option value="">Product 1</option>
                    <option value="">Product 2</option>
                </select>
                </td>
                                <td>
                <select class="capacity" disabled="">

                </select>
                </td>
                <td>
                <input type="text" disabled="" class="price">
                </td>
                <td>
                <span class="total">-</span>
                </td>
            </tr>
            <tr>
                <td>
                <select class="prod">
                            <option value="">Select..</option>
                    <option value="">Product 1</option>
                    <option value="">Product 2</option>
                </select>
                </td>
                                                <td>
                <select class="capacity" disabled="">

                </select>
                </td>
                <td>
                <input type="text" disabled="" class="price">
                </td>
                <td>
                <span class="total">-</span>
                </td>
            </tr>
        </table>
    </body>
</html>

Answer 7

据我所知，代码的相关部分在这里：

>     $(function() {
>       $('td').change(function() {
>         var row = $(this).parent().find('td:first').text();
>         //alert(row);

在函数中， this 应该是TD元素，其父TR将是 parentNode 。要获得 rowIndex ，您只需要：

var rowIndex = this.parentNode.rowIndex;

如何使用jQuery查找行ID？

7 个答案: