Как найти идентификатор строки с помощью jQuery? - PullRequest
Новая
       0

Как найти идентификатор строки с помощью jQuery?

1 голос
/ 08 июня 2011

Ребята, я задал подобный вопрос, как этот ранее, так как я не смог решить мою проблему, я решил задать подробный вопрос. Пожалуйста, обратитесь к моему изображению

Table, containing input fields

Как я уже упоминал на рисунке, мне нужно определить конкретное значение индекса строки таблицы или номер поля индекса , чтобы включить конкретную емкость, цену за единицу, кол-во полей и отобразить промежуточный итог. попробовал некоторые коды обнаружения строк javascript и jq таблицы, и они выполняют свою работу, но они незаметно влияют на поле выбора емкости, так как каждый раз, когда происходит щелчок или выбор, поле емкости сбрасывается на пустое.

Я пробовал это 2 полных дня, но все еще не смог найти решение: (

Это полный набор кодов - http://jsfiddle.net/Ceylo/AE2Mb/

Пожалуйста, помогите мне пройти через это.

Ответы [ 7 ]

8 голосов
/ 08 июня 2011

Предположим, вы указали это как обратный вызов $('td').click(): 

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

или 

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

Здесь jsfiddle sample

1 голос
/ 08 июня 2011

Возможно, есть более элегантные способы сделать это, но почему бы просто не добавить идентификатор, содержащий индекс строки, к каждому элементу tr?Вы создаете их динамически, поэтому просто используйте счетчик для назначения идентификатора при создании.

0 голосов
/ 08 июня 2011

Насколько я могу судить, соответствующая часть вашего кода находится здесь: 

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

Внутри функции этот должен быть элементом TD, его родительский TR будетего parentNode .Чтобы получить rowIndex , вам просто нужно: 

var rowIndex = this.parentNode.rowIndex;
0 голосов
/ 08 июня 2011

Вот рабочий пример - делает то, что вы хотите. Для краткости я опустил обработку выбора продукта по умолчанию и т. Д. Поэтому, если вы выберете опцию «Выбрать» для продукта, вы получите ошибку. В идеале вы могли бы сделать это, используя какой-то шаблон и отобразить параметры продукта на основе вашей структуры данных ...

на 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>
0 голосов
/ 08 июня 2011

проверьте это.надеюсь, что это может помочь:

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

0 голосов
/ 08 июня 2011

в случае, если вы хотите идентифицировать его при смене элемента: 

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

Следуя советам Роба: 

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

    alert(thisrow.eq(0).rowIndex);
 });
0 голосов
/ 08 июня 2011

Вы можете просто использовать jQuery для события click или change, чтобы перейти, например, к первой строке относительно текстовой области.

Так что, если ваша разметка такая: 

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...