jQuery выбирает элементы в «коллекции» (например, ячейки в таблице) - PullRequest
Новая
       6

jQuery выбирает элементы в «коллекции» (например, ячейки в таблице)

0 голосов
/ 17 августа 2011

У меня есть таблица HTML с элементами ввода, которые я использую для пакетного редактирования. Я построил скелтон HTML-пример ниже. Может кто-нибудь, пожалуйста, помогите мне понять, как сделать что-то вроде следующего:

  • добавить селектор в каждое из полей «Количество», например, .Кнопка ()
  • получить значение в полях Количество и Сумма, например, .val ()
  • обновить поле Всего, например, .text ()

Основная проблема заключается в том, что HTML генерируется моим представлением в моем приложении ASP.Net MVC, а соглашение об именовании для входного идентификатора - "objectName_indexNumber_propertName" - например, MyObject_1_Quantity.

Могу ли я просто сделать цикл for / .each (), а затем выполнить строковое манипулирование, чтобы получить идентификатор и выполнить мою магию? Есть ли способ лучше? Спасибо. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            // how do I select all of them?
            $('#MyObject_1_Quantity').change(DoCalculation);
        });

        function DoCalculation() {
            alert("what should I do here? I need to know the index/row I'm in, and which cell triggered me.");

        }
    </script>

</head>
<body>

    <p>Test jquery Selector</p>
    <table>
        <tr>
            <td>Row 1</td>
            <td><input type="text" id="MyObject_1_Quantity" /></td>
            <td><input type="text" id="MyObject_1_Rate" /></td>
            <td><span id="MyObject_1_Total">$100.00</span></td>
        </tr>
        <tr>
            <td>Row 2</td>
            <td><input type="text" id="MyObject_2_Quantity" /></td>
            <td><input type="text" id="MyObject_2_Rate" /></td>
            <td><span id="MyObject_2_Total">$100.00</span></td>
        </tr>
        <tr>
            <td>Row 3</td>
            <td><input type="text" id="MyObject_3_Quantity" /></td>
            <td><input type="text" id="MyObject_3_Rate" /></td>
            <td><span id="MyObject_3_Total">$100.00</span></td>
        </tr>            
    </table>

</body>
</html>

1 Ответ

2 голосов
/ 17 августа 2011

Это помещает обработчик на 2 <td> в каждом ряду. Тогда this в обработчике будет этим входом, так что вы можете получить вложенный вход и соседние ячейки для расчета и установить значение в <span>.

Пример: http://jsfiddle.net/Skjbv/1/

$(document).ready(function() {
    $('table tr td:nth-child(2)').change(DoCalculation);
});

function DoCalculation() {
    var row = this.parentNode;
    input1 = this.firstChild.value;
    input2 = row.cells[2].firstChild.value;
    span =   row.cells[3].firstChild;

     // convert to Number----v----------v
    span.innerHTML = ('$' + (~~input1 * ~~input2).toFixed(2));
     // create string with 2 decimal places-----------^

}

Если это не совсем так, что вы можете положиться на 2-ю ячейку, тогда вы можете изменить выбор DOM на это, что поместит обработчик непосредственно на вход:

Пример: http://jsfiddle.net/Skjbv/3/

$(document).ready(function() {
    $('table tr td input[id$="_Quantity"]').change(DoCalculation);
});

function DoCalculation() {
    var row = $(this).closest('tr');
    input1 = this.value;
    input2 = row.find('input[id$="_Rate"]').val();
    span = row.find('span[id$="_Total"]');

    span.html('$' + (~~input1 * ~~input2).toFixed(2));
}

Они используют attribute-ends-with-selector [документы] для выбора элементов с правильным значением в конце атрибута ID.

...