Динамическая таблица + подсчет двух ячеек

@semen7072013 · Регистрация: 20.03.2014

Студворк — интернет-сервис помощи студентам

Всем привет! Возникла проблема с динамической таблицей.
Имеется динамическая таблица(по нажатию добавляется строка), есть графа "площадь" куда выводится выражение height*width. Код приведенный ниже просчитывает только первую строку, а во второй и далее не просчитывает.

HTML5
1
2
3
4
5
6
7
8
9
10
11
<tr class="row">
<td class='td_6'>
       <input type='text' name='height[]' id="height" value="" />
</td>
<td class='td_7'>
    <input type='text' name='width[]' id="width" value="" />
</td>
<td class='td_9'>
    <input type='text' name='area[]' id="area" value="" />
</td>
</tr>

JavaScript
1
2
3
4
5
6
7
8
9
$(function() {
  var calculate = function() {
    var height = parseInt($("#height").val());
    var width = parseInt($("#width").val());
    $("#area").val(height * width);
  };
    
  $("#height, #width").change(calculate).keyup(calculate);
});

@Lazy_Den · 11.03.2015, 03:51

semen7072013, на странице не может быть два и более элемента с одинаковым ID! Измените на классы. А дальше нужно строки таблицы обрабатывать в цикле. Для этого в jQuery есть методы each() или map().

@semen7072013 · 11.03.2015, 04:02 **[ТС]**

Lazy_Den, Спасибо за подсказку! Пойду мучить цикл(скорее он меня). В программирование туго

Буду признателен за помощь в составлении цикла. Но за ссылки еще раз спасибо!

@Lazy_Den · 11.03.2015, 04:15

Сообщение от semen7072013

Буду признателен за помощь в составлении цикла.

JavaScript
1
2
3
4
5
6
7
8
$(function () {
    var calculate = function () {
        $('tr').each(function(i, tr){
            $('.area', tr).val(+$('.height', tr).val() * +$('.width', tr).val());
        });            
    };
    $(".height, .width").on('input change', calculate);
});

Так как вы не проверяете получаемые значение (а надо бы), то запись можно сократить, без предварительного преобразования к типу int. Почему желательно проверять? Если будут введены какие-нибудь символы, кроме цифр, в начале строки или в середине, то вы получите или NaN или неверное значение. Решение о проверке, оставляю на ваше усмотрение.
Второй вариант - без цикла. Обрабатываем только ту строку, в которой происходит событие:

JavaScript
1
2
3
4
5
6
7
$(function () {
    var calculate = function () {
        var tr = $(this).closest('tr');
        $('.area', tr).val(+$('.height', tr).val() * +$('.width', tr).val());
    };
    $(".height, .width").on('input change', calculate);
});

Смотрим пример с циклом и вариант без него.

@semen7072013 · 11.03.2015, 04:39 **[ТС]**

Хм, интересно он у меня как-то считает...первую строчку нормально, а остальные только после того, как я поменяю значения в первой строке.

@Lazy_Den · 11.03.2015, 04:44

Сообщение от semen7072013

интересно он у меня как-то считает

Примеры по ссылкам, которые я дал, работают как и задумано, а что у вас не так - я не знаю. ID у элементов на классы поменять не забыли?

@semen7072013 · 11.03.2015, 04:56 **[ТС]**

В общем, вот весь мой убогий код:
Что тут не так я уже тем более не пойму)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<form action="send1.php" method="post" id="cForm2">
        <div class="mainData">
                <div class='fleft'>
                    <label for='customer'>Заказчик:*</label>
                    <label for='face'>Контактное лицо:</label>
                    <label for='tel'>Телефон:* <span style="font-size:9px">(только цифры)</span></label>
                </div>
                
                <div class="fright">
                    <input value="" type="text" name='customer' id="customer" />
                    <input value="" type="text" name='face' id="face" />
                    <input value="" type="text" name='tel' id="tel" />
                    <!--input value="" type="text" name='mail' id="mail" /-->
                </div>
            </div>
            
            
            <div class='button' onclick='addTr(this)' end='1'>+</div>
            <div class='button' onclick='delTr(this)' end='1' style="line-height:25px">-</div>
            
                <div style="clear:both;height:10px"></div>
                    
            <table cellspacing=0 cellpadding=0 class="table">
            <tbody>
                <tr class='tr_head'>
                    <td class='td_1'>№</td>
                    <td class='td_2'>Цвет*</td>
                    <td class='td_3'>Толщина МДФ*</td>
                    <td class='td_4'>Фрезеровка*</td>
                    <td class='td_5'>Кромка*</td>
                    <td class='td_6'>Высота*</td>
                    <td class='td_7'>Ширина*</td>
                    <td class='td_8'>Количество*</td>
                    <td class='td_9'>Площадь*</td>
                    <td class='td_10'>Глухие</td>
                    <td class='td_11'>Витрина</td>
                </tr>
                <tr class='tr' id='row_1'>
                    <td class='td_1'>
                    <span>1</span>
                        <input type="hidden" name='start[]' class="start" value='1' />
                    </td>
                    <td class='td_2'>
                        <input type='text' name='color1[]' class="color1" value="" />
                    </td>
                    <td class='td_3'>
                        <input type='text' name='weight1[]' class="weight1" value="" />
                    </td>
                    <td class='td_4'>
                        <input type='text' name='frez[]' class="frez" value="" />
                    </td>
                    <td class='td_5'>
                        <input type='text' name='cromka[]' class="cromka" value="" />
                    </td>
                    <td class='td_6'>
                        <input type='text' name='height[]' class="height" value="" />
                    </td>
                    <td class='td_7'>
                        <input type='text' name='width[]' class="width" value="" />
                    </td>
                    <td class='td_8'>
                        <input type='text' name='quantity[]' class="quantity" value="" />
                    </td>
                    <td class='td_9'>
                        <input type='text' name='area[]' class="area" value="" />
                        
                    </td>
                    <td class='td_10'>
                        <input type='text' name='gluh[]' class="gluh" value="" />
                    </td>
                    <td class='td_11'>
                        <input type='checkbox' name='vitrina[]' class="vitrina" value="" />
                    </td>
                </tr>
                </tbody>
            </table>
            <input type='submit'  value='Отправить' class='btn btn-large btn-block btn-primary' /></div>
</form>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
function addTr(e){
var end = parseInt($(e).attr('end'))
var endNow = parseInt($(e).attr('end'))+1;
var id = '#row_'+end;
var new_tr = $(id).clone();
var new_id = 'row_'+endNow;
new_tr.attr('id',new_id)
new_tr.attr('n',endNow);
 
new_tr.find('.td_1').find('span').text(endNow);
new_tr.find('.td_1').find('input').attr('name','start'+'[]')
new_tr.find('.td_1').find('input').val(endNow)
 
new_tr.find('.td_2').find('input').attr('name','color1'+'[]')
new_tr.find('.td_2').find('input').selectedIndex=0;
 
new_tr.find('.td_3').find('input').attr('name','weight1'+'[]')
new_tr.find('.td_3').find('input').selectedIndex=0;
new_tr.find('.td_4').find('input').attr('name','frez'+'[]')
new_tr.find('.td_4').find('input').selectedIndex=0;
new_tr.find('.td_5').find('input').attr('name','cromka'+'[]')
new_tr.find('.td_5').find('input').val('')
new_tr.find('.td_6').find('input').attr('name','height'+'[]')
new_tr.find('.td_6').find('input').val('')
new_tr.find('.td_7').find('input').attr('name','width'+'[]')
new_tr.find('.td_7').find('input').val('')
new_tr.find('.td_8').find('input').attr('name','quantity'+'[]')
new_tr.find('.td_8').find('input').selectedIndex=0;
new_tr.find('.td_9').find('input').attr('name','area'+'[]')
new_tr.find('.td_9').find('input').val('')
new_tr.find('.td_10').find('input').attr('name','gluh'+'[]')
new_tr.find('.td_10').find('input').val('')
new_tr.find('.td_11').find('input').attr('name','vitrina'+'[]')
new_tr.find('.td_11').find('input').val('')
 
    
    
    console.log(endNow)
    console.log(new_tr.find("[name='item']"))
    var kids = new_tr.children();
    for(var i=0;i<kids.length;i++ )
    {
    if(kids[i].nodeType==1)
        {
        
        }
        //console.log(kids)
    }
$('#row_'+end).after(new_tr);
$(e).attr('end',endNow)
$("[onclick='delTr(this)']").attr('end',endNow)
}
 
function delTr(e){
var end = parseInt($(e).attr('end'))
if(end>1)
    {
    var endNow = parseInt($(e).attr('end'))-1;
    var id = '#row_'+end;
    var new_tr = $(id).remove();
    $(e).attr('end',endNow)
    $("[onclick='addTr(this)']").attr('end',endNow)
    }
}
$(function () {
    var calculate = function () {
        $('tr').each(function(i, tr){
            $('.area', tr).val(+$('.height', tr).val() * +$('.width', tr).val());
        });            
    };
    $(".height, .width").on('input change', calculate);
});

@Lazy_Den · 11.03.2015, 05:05

Сообщение от semen7072013

вот весь мой убогий код

Мде... Ну, закрывая глаза на всё остальное, измените строку 71 на следующее:

JavaScript
1
$("#cForm2").on('input change', ".height, .width", calculate);

@semen7072013 · 11.03.2015, 05:09 **[ТС]**

Спасибо!!! Вам страшно смотреть, а мне думать

Ничего, доведу до ума, я так это просто не оставлю

Вы ещё мой PHP обработчик не видели

Теперь можно идти и спать, задание выполнено!

Новые блоги и статьи Все статьи Все блоги /
Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек SDL3 и Box2D из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия SDL 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual. . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	11.03.2015, 03:51
	semen7072013, на странице не может быть два и более элемента с одинаковым ID! Измените на классы. А дальше нужно строки таблицы обрабатывать в цикле. Для этого в jQuery есть методы each() или map(). 1

@semen7072013 0 / 0 / 0 Регистрация: 20.03.2014 Сообщений: 15
	11.03.2015, 04:02 [ТС]
	Lazy_Den, Спасибо за подсказку! Пойду мучить цикл(скорее он меня). В программирование туго Буду признателен за помощь в составлении цикла. Но за ссылки еще раз спасибо! 0

@semen7072013 0 / 0 / 0 Регистрация: 20.03.2014 Сообщений: 15
	11.03.2015, 04:39 [ТС]
	Хм, интересно он у меня как-то считает...первую строчку нормально, а остальные только после того, как я поменяю значения в первой строке. 0

@semen7072013 0 / 0 / 0 Регистрация: 20.03.2014 Сообщений: 15
	11.03.2015, 05:09 [ТС]
	Спасибо!!! Вам страшно смотреть, а мне думать Ничего, доведу до ума, я так это просто не оставлю Вы ещё мой PHP обработчик не видели Теперь можно идти и спать, задание выполнено! 0