CODEWITHSUNDEEP
javascriptjqueryajax
Kanchana Randika
Kanchana Randika

Reputation: 546

How to find the row Id using jQuery?

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

Table, containing input fields

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 complete code set - http://jsfiddle.net/Ceylo/AE2Mb/

Please help me to get through this.

Upvotes: 1

Views: 4426

Answers (7)

Michal
Michal

Reputation: 13639

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.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>

Upvotes: 0

RobG
RobG

Reputation: 147403

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;

Upvotes: 0

Khanh Van
Khanh Van

Reputation: 1442

check this. hope that it can help:

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

Upvotes: 0

James Khoury
James Khoury

Reputation: 22319

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.net/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);
 });

Upvotes: 0

zerkms
zerkms

Reputation: 254926

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

Upvotes: 8

Andy Ray
Andy Ray

Reputation: 32066

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.

Upvotes: 0

kinakuta
kinakuta

Reputation: 9037

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.

Upvotes: 1

Related Questions