Как получить элементы td и перейти к функции JavaScript?

Question

Как получить элементы td и перейти к функции JavaScript?

0

У меня есть код HTML:

<table>
   <th>Items</th><th>Rate</th><th>Quantity</th>
   <tr><td>Item A</td><td>20</td><td><input type="text" id="txtItemA"/></td></tr>
   <tr><td>Item B</td><td>10</td><td><input type="text" id="txtItemB"/></td></tr>
   <tr><td>Item C</td><td>30</td><td><input type="text" id="txtItemC"/></td></tr>
   <tr><td>Total Price</td><td><input type="text" id="txtPrice"/></td></tr>
</table>

В событии onblur текстовых полей я хочу вызвать функцию javascript, которая будет умножать количество, добавленное пользователем, на скорость и отображать его в текстовом поле txtPrice. Но я зациклился на логике того, как мне выбрать скорость, соответствующую введенному количеству.

Например: Когда я ввожу 2 в текстовое поле txtItemA, 40 должно отображаться в текстовом поле txtPrice. Функция Javascript проста, она просто умножит ставку с введенным количеством и отобразит его в txtPrice.

Что мне нужно сделать, чтобы получить связанную скорость с количеством и передать ее функции javascript?

Функция Javascript

function DisplayTotal(rate, quantity)
{
  document.getElementById('txtPrice').innerText = rate * quantity;
}

Ludovic Guillaume 20 дек. 2013, в 12:31

Источник

0

Как определяется ставка в первую очередь? В зависимости от того, есть ли несколько установленных скоростей или бесконечные изменения, как вы будете решать эту проблему.
DBS 20 дек. 2013, в 11:33
5

как jsfiddle.net/arunpjohny/5jGep/1
Arun P Johny 20 дек. 2013, в 11:35
0

@DBS - В настоящее время я рассматриваю их как константы.
user1556433 20 дек. 2013, в 11:35
0

в качестве дополнения к решению Аруна Джоанни, вы можете сделать его более производительным, сохранив результат для каждой строки в специальном массиве, а затем вам нужно будет каждый раз пересчитывать только одну конкретную строку. Но это полезно только для действительно больших таблиц
smnbbrv 20 дек. 2013, в 11:37
2

или jsfiddle.net/arunpjohny/5jGep/2
Arun P Johny 20 дек. 2013, в 11:37
0

@ArunPJohny - да, это то, что я хотел :)
user1556433 20 дек. 2013, в 11:38

Показать ещё 4 комментария

Теги:

javascript

jquery

html

html5

dom

7 ответов

3

Дайте рассматриваемым элементам общий класс, скажем, class="quantity", чтобы их можно было легко выбрать без указания идентификаторов или с помощью слишком общего селектора, который также подбирает общее поле цены, а затем вы можете сделать это:

var $qtyFields = $('input.quantity').change(function() {
    var price = 0;
    $qtyFields.each(function() {
        price += this.value * $(this).closest("tr").find("td:eq(1)").text();
    });
    $("#txtPrice").val(price);
});

Демо: http://jsfiddle.net/95hje/

То есть, перебирайте каждое поле и умножайте его значение на столбец скорости в той же строке. Поиск связанного элемента с помощью .closest() для получения общего предка, а затем .find() для .find() назад - это общий шаблон.

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

nnnnnn 20 дек. 2013, в 09:32

2

Чистое javascript-решение (без JQuery), которое будет работать, даже если вы измените количество строк в таблице и которое будет обрабатывать проблему с неправильным вводом пользователя:

<html>
<head>
<script type="text/javascript">
function DisplayTotal(){
var num = document.getElementById("myTable").rows.length-2;
var tds = document.getElementsByTagName("td"), total = 0, rate, quant;
    for(var i = 0; i < num; i++){
    rate = parseInt(tds[3*i+1].innerHTML);
    quant = parseInt(tds[3*i+2].firstChild.value);
        if(isNaN(quant)){
        continue;
        }
    total += rate*quant;
    }
document.getElementById("txtPrice").value = total;
}
</script>
</head>
<body>
<table id="myTable">
    <tr><th>Items</th><th>Rate</th><th>Quantity</th></tr>
    <tr><td>Item A</td><td>20</td><td><input type="text" id="txtItemA" onkeyup="DisplayTotal();"></td></tr>
    <tr><td>Item B</td><td>10</td><td><input type="text" id="txtItemB" onkeyup="DisplayTotal();"></td></tr>
    <tr><td>Item C</td><td>30</td><td><input type="text" id="txtItemC" onkeyup="DisplayTotal();"></td></tr>
    <tr><td>Item D</td><td>50</td><td><input type="text" id="txtItemD" onkeyup="DisplayTotal();"></td></tr>
    <tr><td>Total Price</td><td><input type="text" id="txtPrice"></td></tr>
</table>
<button type="button" onclick="DisplayTotal();">Get Total Price</button>
</body>
</html>

Смотрите демо здесь.

user2680766 20 дек. 2013, в 10:11

1

Это ваш html

<table>
   <th>Items</th><th>Rate</th><th>Quantity</th>
   <tr><td>Item A</td><td>20</td><td><input type="text" id="txtItemA"/></td></tr>
   <tr><td>Item B</td><td>10</td><td><input type="text" id="txtItemB"/></td></tr>
   <tr><td>Item C</td><td>30</td><td><input type="text" id="txtItemC"/></td></tr>
   <tr><td>Total Price</td><td><input type="text" id="txtPrice"/></td></tr>
</table>

Это будет ваш скрипт

$(document).ready(function(){
    $('table').on('blur','td input[id^=txtItem]',function(){
        var fields = $('td input[id^=txtItem]');
        var total = 0;

        $.each(fields,function(index,value){
            var quantity = $(this).val();
            var rate = $(this).parent('td').prev('td').text();
            total += (quantity * rate);            
        });       
        $('#txtPrice').val(total);
    });
});

JSFIDDLE DEMO

На заметку я настоятельно рекомендую вам не полагаться на javascript, чтобы, наконец, зарядить посетителя, так как это можно легко изменить на 0 с помощью javascript

LoneWOLFs 20 дек. 2013, в 10:17

0

Спасибо за совет, я также вычислю все эти значения на стороне сервера.
user1556433 20 дек. 2013, в 11:58
0

Крутая надежда, что это отвечает на ваш запрос
LoneWOLFs 20 дек. 2013, в 12:03

1

Измените свою разметку, чтобы добавить некоторые классы к элементам ввода для легкого выбора

<table>
    <th>Items</th>
    <th>Rate</th>
    <th>Quantity</th>
    <tr>
        <td>Item A</td>
        <td>20</td>
        <td>
            <input type="text" class="txtItem" id="txtItemA" />
        </td>
    </tr>
    <tr>
        <td>Item B</td>
        <td>10</td>
        <td>
            <input type="text" class="txtItem" id="txtItemB" />
        </td>
    </tr>
    <tr>
        <td>Item C</td>
        <td>30</td>
        <td>
            <input type="text" class="txtItem" id="txtItemC" />
        </td>
    </tr>
    <tr>
        <td>Total Price</td>
        <td>
            <input type="text" id="txtPrice" />
        </td>
    </tr>
</table>

тогда

jQuery(function () {
    var $items = $('.txtItem').change(function () {
        var total = 0;
        $items.each(function () {
            total += ($(this).data('price') * parseInt(this.value)) || 0;
        })
        $('#txtPrice').val(total)
    }).each(function () {
        //store the price of the item in data for easy access later
        $(this).data('price', parseInt($(this).parent().prev().text(), 10) || 0);
    })
})

Демо: скрипка

Arun P Johny 20 дек. 2013, в 10:12

1

У меня есть самое простое решение, которое я предполагаю (без jQuery):

<html lang="en">
<head>
    <title><!-- Insert your title here --></title>
    <script language="javascript" type="text/javascript">
         function DisplayTotal()
         {
            var quantity = 0, rate = 0, total=0;
            var i=0;
            do {
                var c = document.getElementById("txtItem" + i++);
                if (c) {
                    var r = c.parentNode.previousSibling;
                    if (c.value) {
                        quantity = parseFloat(c.value);
                        rate = parseFloat(r.innerHTML);
                        total += quantity * rate;
                    }
                }
            } while(c);
            document.getElementById('txtPrice').value = total.toFixed(2);
         }
    </script>
</head>
<body>
   <table>
   <th>Items</th><th>Rate</th><th>Quantity</th>
   <tr><td>Item A</td><td>20</td><td><input type="text" id="txtItem0"  onblur="DisplayTotal()"/></td></tr>
   <tr><td>Item B</td><td>10</td><td><input type="text" id="txtItem1" onblur="DisplayTotal()"/></td></tr>
   <tr><td>Item C</td><td>30</td><td><input type="text" id="txtItem2" onblur="DisplayTotal()"/></td></tr>
   <tr><td>Total Price</td><td><input type="text" id="txtPrice"/></td></tr>
   </table>
</body>

Sayris 20 дек. 2013, в 09:37

0

Что делать, если у меня есть случайные предметы?
user1556433 20 дек. 2013, в 11:50
0

что вы имеете в виду ? случайные строки или двоеточия?
Sayris 20 дек. 2013, в 11:51
0

Вы сделали массив, содержащий txtItemA ... txtItemC. Я мог бы иметь более или менее количество элементов на реальном сайте.
user1556433 20 дек. 2013, в 11:57
0

изменить идентификатор с префиксом, таким как «txtItem» и число (строка). В коде используйте innerHTML, а не innerText.
Sayris 20 дек. 2013, в 12:08

Показать ещё 2 комментария

0

См. Демо здесь http://jsfiddle.net/UFS97/1/

HTML

<table id="invoice_tbl">
        <th>Items</th>
        <th>Rate</th>
        <th>Quantity</th>
        <tr class="item">
            <td>Item A</td>
            <td>20</td>
            <td>
                <input type="text" class="item_price" id="txtItemA" value=""/>
            </td>
        </tr>
        <tr class="item">
            <td>Item B</td>
            <td>10</td>
            <td>
                <input type="text" class="item_price" id="txtItemB"/>
            </td>
        </tr>
        <tr class="item">
            <td>Item C</td>
            <td>30</td>
            <td>
                <input type="text" class="item_price" id="txtItemC" value=""/>
            </td>
        </tr>
        <tr>
            <td>Total Price</td>
            <td>
                <input type="text" id="txtPrice"/>
            </td>
        </tr>
    </table>



jQUery
---------------------------
    $(document).ready(function(){ 
    $(".item_price").blur(function(){
    total = 0.00;
    item_row = $("table#invoice_tbl").children('tbody').children("tr.item");
    item_row.each(function(){
        item_price = parseFloat($(this).children('td').eq(1).html());
        item_qty = parseInt($(this).children('td').eq(2).children('input').val());
        row_price = item_price*item_qty;
        if(!isNaN(row_price)){
            total +=row_price;
        }
    });
    $("#txtPrice").val(total);
});
});

См. Демо здесь http://jsfiddle.net/UFS97/1/

SKG 20 дек. 2013, в 11:07

Ещё вопросы

Как определяется ставка в первую очередь? В зависимости от того, есть ли несколько установленных скоростей или бесконечные изменения, как вы будете решать эту проблему.
@DBS - В настоящее время я рассматриваю их как константы.
в качестве дополнения к решению Аруна Джоанни, вы можете сделать его более производительным, сохранив результат для каждой строки в специальном массиве, а затем вам нужно будет каждый раз пересчитывать только одну конкретную строку. Но это полезно только для действительно больших таблиц
Спасибо за совет, я также вычислю все эти значения на стороне сервера.
Крутая надежда, что это отвечает на ваш запрос
Что делать, если у меня есть случайные предметы?
что вы имеете в виду ? случайные строки или двоеточия?
Вы сделали массив, содержащий txtItemA ... txtItemC. Я мог бы иметь более или менее количество элементов на реальном сайте.
изменить идентификатор с префиксом, таким как «txtItem» и число (строка). В коде используйте innerHTML, а не innerText.

Ludovic Guillaume · Accepted Answer · 2013-12-20T08-57-00.000Z

jsfiddle: http://jsfiddle.net/FeLKx/4/

HTML:

<table class="items">
    <thead>
        <th>Items</th>
        <th>Rate</th>
        <th>Quantity</th>
    </thead>
    <tbody>
        <tr class="item">
            <td>Item A</td>
            <td class="rate">20</td>
            <td class="quantity">
                <input type="text" id="txtItemA" />
            </td>
        </tr>
        <tr class="item">
            <td>Item B</td>
            <td class="rate">10</td>
            <td class="quantity">
                <input type="text" id="txtItemB" />
            </td>
        </tr>
        <tr class="item">
            <td>Item C</td>
            <td class="rate">30</td>
            <td class="quantity">
                <input type="text" id="txtItemC" />
            </td>
        </tr>
        <tr>
            <td>Total Price</td>
            <td>
                <input type="text" id="txtPrice" />
            </td>
        </tr>
    </tbody>
</table>

JS:

$(document).ready(function () {
    $('.items .item .quantity input').blur(function () {
        var total = 0;

        $('.items .item').each(function(index, value) {
            var rate = $(this).find('.rate').text();
            var quantity = $(this).find('.quantity input').val();

            total += rate * quantity;
        });

        $('#txtPrice').val(total);
    });
});