javascript - How to find the row Id using jQuery? - Stack Overflow

admin管理员组

文章数量:1314349

Guys I asked a similar question like this earlier since I was unable to solve my problem I decided to ask a detailed question.Please referrer to my image

As i mentioned on the image I need to identify the particular table row index value or the number of the index field to enable the particular capacity,unit price,qty fields and to display the subtotal.I tried some javascript and jq table row detection codes and they do the job but they effect to the capacity selection field baldly since every time a click or a select occurs capacity field gets reset to blank.

I tried this 2 full days but still unable to make a solution :(

This is the plete code set - /

Please help me to get through this.

Guys I asked a similar question like this earlier since I was unable to solve my problem I decided to ask a detailed question.Please referrer to my image

As i mentioned on the image I need to identify the particular table row index value or the number of the index field to enable the particular capacity,unit price,qty fields and to display the subtotal.I tried some javascript and jq table row detection codes and they do the job but they effect to the capacity selection field baldly since every time a click or a select occurs capacity field gets reset to blank.

I tried this 2 full days but still unable to make a solution :(

This is the plete code set - http://jsfiddle/Ceylo/AE2Mb/

Please help me to get through this.

• javascript
• jquery
• ajax

• Could you give an exmaple for the row name? is it in a pattern? could you post some sample html maybe? – James Khoury Commented Jun 8, 2011 at 0:51
• 3 HTML code and the jQuery code you are currently working with would be helpful. – Kissaki Commented Jun 8, 2011 at 0:53
• 1 Also, could you check and fix the spelling at "but they effects to the capacity selection field baldly" please. – Kissaki Commented Jun 8, 2011 at 0:54
• You were probably told last time that table row elements have a rowIndex property. Once you have the row, get its rowIndex. – RobG Commented Jun 8, 2011 at 1:23
• @Kissaki,@RobG I updated the question with the link to my code set.Please have a look at that. – Kanchana Randika Commented Jun 8, 2011 at 1:55

7 Answers 7

Supposing you put this as a callback of $('td').click():

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

or

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

Here is jsfiddle sample

There's probably more elegant ways to do it, but why not just add an id that contains the row index to each tr element? You're creating them dynamically, so just use a counter to assign the id as you create them.

You can just use jQuery on the click or change event to navigate to the first row relative to the textarea, for example.

So if your markup is this:

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

You could use this (pseudocode)

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

Notice how the navigation works, when a click event is caught on the textbox then "this" will reference the text box. So you can navigate to its parent, (the tr), then navigate to the tr's first child (the td with the row number), and get its innerHTML, an cast it to an int.

in the case you want to identify it on change of an element :

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/JE8kR/

UPDATE

Going with RobG's advice:

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

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

check this. hope that it can help:

http://jsfiddle/chukhanhvan/pSjHc/1/

As far as I can tell, the relevant part of your code is here:

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

Within the function, this should be a TD element, its parent TR will be its parentNode. To get the rowIndex you just need:

var rowIndex = this.parentNode.rowIndex;

Here is a working example - does most that you want it to do. For the brevity I omitted handling default select of the product etc - So if you select a "Select" option for product you will get an error. Ideally you would do this using some sort of template and render product options based on your data struct as well...

on jsFiddle http://jsfiddle/Michal/Nubqj/

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3/TR/html4/loose.dtd">
<html xmlns="http://www.w3/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="https://ajax.googleapis./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>

本文标签： javascriptHow to find the row Id using jQueryStack Overflow