0 / 0 / 0
Регистрация: 27.06.2013
Сообщений: 35

Пересчет строчек в таблице

05.07.2013, 16:09. Показов 2506. Ответов 16
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Пытаюсь сделать пересчет строк, но не пойму как!
Дело в том что у меня при нажатию на кнопку, создается таблица с нумерацией, но при нажатий на удаление нумерация на обновляется =(
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
$(function () {
 
  var i=0; //значение строчки
  $('#nazv_ob').click(function(){ // по щелчку по кнопке добавление таблици
    // просто добавляем строку
    i++;
    
    $('table tbody.ssss').append('<tr style="margin: 0 auto;"><td align="center" class="dasd">'+i+'</td><td align="center"><input type="text" class="nazv_obkt" id="nazv_obkt" style="margin: 0 auto;" size = "55"/></td><td align="center"><input type="text" style="margin: 0 auto;" class="kol_vo" size = "1" onKeyPress ="if ((event.keyCode < 48) || (event.keyCode > 57)) event.returnValue = false;"  maxlength="4"/></td><td align="center"><a href="#"  style="margin: 0 auto;"><input type="button" style="margin: 0 auto;" value="-" onmouseover="tooltip.show(\'<center> Удаление изделия</center>\');" onmouseout="tooltip.hide();" /></a></td></tr>');
    
       $('.asd').remove();
    if(i!=0){
    $('#ok').removeAttr('disabled').removeClass().addClass('tabb'); //removattr удаление атрибут
    }
  });
 
  // поскольку удаляем по клику на ссылке
  // и строки динамически добавляются в таблицу
  // используем метод live, чтобы навесить обработчики
  // на еще несуществующие элементы а
  $('a').live('click',function(){ //удаление строки
    // от элемента, по которому кликнули поднимаемся по родителям
    // нам нужна именно tr - ее и удаляем (именно ту, где был клик)
    i=i-1;
    $(this).parents('tr').remove();
    if(i==0){location.reload();}
    
    
  });
  
  
});
Миниатюры
Пересчет строчек в таблице  
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
05.07.2013, 16:09
Ответы с готовыми решениями:

Пересчёт чисел в <input type="text">
{ var n=document.getElementById(&quot;num&quot;).value; var...

Пересчет единиц времени, веса, информации, расстояний и валют
помогите на node js преобразовать дату вида dd:mm:yy в целое число.

переведите с паскаля на JavaScript пару строчек (классы)?
Type TMyCar = record name:string; koleso:array of integer; end; вот это задание типов на...

16
0 / 0 / 0
Регистрация: 27.06.2013
Сообщений: 35
09.07.2013, 08:46  [ТС]
Если кому интересно, сам нашел решение задачи!?

Обязательное подключение библиотек jQuery:
JavaScript
1
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
Пример скрипта:
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
$(document).ready(function() {
 
    
    //блок добавления строки в таблицу
    $(document).on('click', '#nazv_ob', function() {
    
        $('tr.accsd').remove(); //очистка сообщения что изделий нет
        var $table = $(this).siblings('table#asddd');
        var $new_row = $('<tr class = "qweasd"><td width="20" align="center" class="dasd" style = "background-color:red; color:white; font-weight: bold;"></td><td align="center" width="80"><input type="text" class="nazv_obkt" id="nazv_obkt" style="margin: 0 auto;" size = "56"/></td><td align="center" width="5"><input type="text" style="margin: 0 auto;" class="kol_vo" id="kol_vo" size = "1" onKeyPress ="if ((event.keyCode < 48) || (event.keyCode > 57)) event.returnValue = false;"  maxlength="4"/></td><td align="center" width="16"><input type="button" style="margin: 0 auto;" value="-" class="remove" onmouseover="tooltip.show(\'<center> Удаление изделия</center>\');" onmouseout="tooltip.hide();" /></td></tr>').appendTo($table);
        $new_row.children('td.dasd').prepend('<span class="num" style = "color:white; font-weight: bold;">' + ($new_row.index() + 1) + "</span>");
 
    });
//блок удаления строки в таблице по кнопки
    $(document).on('click', '.remove', function() {
        var $row = $(this).closest('tr'),
            $table = $row.closest('table#asddd');
        $row.remove();
 
        $table.find('tr').each(function(i,v) {
            console.log($(v).find('span.num').text(i));
            $(v).find('span.num').text(i+1);
        });
        
        
    });
    
    
});
Пример php кода:

PHP
1
2
3
4
5
6
7
8
9
10
11
                            $as1='<input type="button" id="nazv_ob" value="Добавить изделие" style="margin: 0 auto;  position: right;margin-left: 440px;"/> <br>
                            <table width="500" border="1" CellPadding="0" CellSpacing="1" style="margin: 0 auto;" class="tabb">
                            <tr height="40" style="background-color:#5B6B77; color:white; font-weight: bold;" align=center>
                            <td width="5" align="center">№</td>
                            <td width="245" align="center">Наименование (и краткие хар-ки)</td>
                            <td width="15">Кол-во</td>
                            <td width="12"></td>
                            </tr>';
 
                                                
                                        echo $as1."<tr class='asd'><table border='1' width='500' height='10' CellPadding='0' CellSpacing='1' align='center' class='tabb' id='asddd'><tr style='background-color:red; color:white;' align='center' class='accsd'><td>Таблица спика изделий пуста</td></tr></table></tr></table>";
0
Develo0per
 Аватар для and_y87
424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,379
Записей в блоге: 98
09.07.2013, 15:33
Вот такая конструкция как то получше вроде будет:
JavaScript
1
2
3
4
5
6
$(document).on('click', '.remove', function() {
    $(this).parents('tr').remove();
    $(this).parents('table').find('span.num').each(function(i,e) {
        $(e).text( i + 1 );
    })
});
0
0 / 0 / 0
Регистрация: 27.06.2013
Сообщений: 35
09.07.2013, 16:02  [ТС]
Цитата Сообщение от and_y87 Посмотреть сообщение
Вот такая конструкция как то получше вроде будет:
JavaScript
1
2
3
4
5
6
$(document).on('click', '.remove', function() {
    $(this).parents('tr').remove();
    $(this).parents('table').find('span.num').each(function(i,e) {
        $(e).text( i + 1 );
    })
});
не обновляет =(
мой способ работает)
0
Develo0per
 Аватар для and_y87
424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,379
Записей в блоге: 98
09.07.2013, 16:32
Ig-or, это конструкция (логика)... а не готовое решение...
0
0 / 0 / 0
Регистрация: 27.06.2013
Сообщений: 35
09.07.2013, 16:40  [ТС]
Цитата Сообщение от and_y87 Посмотреть сообщение
Ig-or, это конструкция (логика)... а не готовое решение...
я пока только начинаю пользоваться JS поэтому пока не очень понятно как твои пример логики работает.
0
Develo0per
 Аватар для and_y87
424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,379
Записей в блоге: 98
09.07.2013, 16:50
Ig-or, виноват не знал... да и врятли запомню ))

но как начинающему я бы советовал не мешать синтаксис...
имею ввиду не делать переменными с долларами...


Вот рабочий примерчик:
JS
JavaScript
1
2
3
4
5
6
7
    $(document).on('click', '.remove', function() {
        var obj = $(this).parents('table') ;
        $(this).parents('tr').remove() ;
        $(obj).find('span.num').each(function(i,e){
            $(e).text( i + 1 );
        })
    });
1
0 / 0 / 0
Регистрация: 27.06.2013
Сообщений: 35
09.07.2013, 17:12  [ТС]
Цитата Сообщение от and_y87 Посмотреть сообщение
Ig-or, виноват не знал... да и врятли запомню ))

но как начинающему я бы советовал не мешать синтаксис...
имею ввиду не делать переменными с долларами...


Вот рабочий примерчик:
JS
JavaScript
1
2
3
4
5
6
7
    $(document).on('click', '.remove', function() {
        var obj = $(this).parents('table') ;
        $(this).parents('tr').remove() ;
        $(obj).find('tr').each(function(i,e){
            $(e).find('span.num').text( i + 1 );
        })
    });
спс биг))) буду пробывать))

Добавлено через 19 минут
and_y87, Можешь помочь или подсказать как теперь вывести список того что ввел пользователь в input *ах?
я вывожу таким образом:
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
 $('#ok').click(function(){
    
    var name = [];
    var kolv = [];
    
    $.each($('.nazv_obkt'), function() {
        name.push($(this).val());
        
    });
    
    $.each($('.kol_vo'), function() {
        kolv.push($(this).val());
        
    });
    
    if(name.length == 0) { 
        name = "none"; 
    }     
    if(kolv.length == 0) { 
        kolv = "none"; 
    }   
    
    for (var i in name)
    alert(" Имя = " + name[i]);
    for (var f in kolv)
    alert(" Кол-во = " + kolv[f]);
    
    
    
    
    return false;
 
    
                        });
это все что я мог сделать при моих знаниях JS...может это можно сделать проще, если тебе не сложно?=(
мне нужно чтоб вывело название и кол-во к нему....пытаюсь через массив но не очень получается,
думал делать проверку на ввод если не чего не ввели то запретить добавления новой строчки...
блин в первый раз работаю с динамическим добавлением и пока не очень понимаю как это сделать(
0
Develo0per
 Аватар для and_y87
424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,379
Записей в блоге: 98
09.07.2013, 17:55
Цитата Сообщение от Ig-or Посмотреть сообщение
блин в первый раз работаю с динамическим добавлением и пока не очень понимаю как это сделать(
тут важна практика... чем её больше тем ты круче

покажи код таблицы....
хочу узнать аттрибуты какие у инпутов ох... домой пора с работы уходить (

ну если никто не поможет и я не забуду то завтра с утречка гляну...
0
0 / 0 / 0
Регистрация: 27.06.2013
Сообщений: 35
10.07.2013, 09:48  [ТС]
Цитата Сообщение от and_y87 Посмотреть сообщение
тут важна практика... чем её больше тем ты круче

покажи код таблицы....
хочу узнать аттрибуты какие у инпутов ох... домой пора с работы уходить (

ну если никто не поможет и я не забуду то завтра с утречка гляну...
да знаю)) вот и учусь)))

JavaScript
1
2
  var $new_row = $('<tr class = "qweasd"><td width="20" align="center" class="dasd" style = "background-color:red; color:white; font-weight: bold;"></td><td align="center" width="80"><input type="text" class="nazv_obkt" id="nazv_obkt" style="margin: 0 auto;" size = "56"/></td><td align="center" width="5"><input type="text" style="margin: 0 auto;" class="kol_vo" id="kol_vo" size = "1" onKeyPress ="if ((event.keyCode < 48) || (event.keyCode > 57)) event.returnValue = false;"  maxlength="4"/></td><td align="center" width="16"><input type="button" style="margin: 0 auto;" value="-" class="remove" onmouseover="tooltip.show(\'<center> Удаление изделия</center>\');" onmouseout="tooltip.hide();" /></td></tr>').appendTo($table);
      $new_row.children('td.dasd').prepend('<span class="num" style = "color:white; font-weight: bold;">' + ($new_row.index() + 1) + "</span>");
Добавлено через 14 часов 43 минуты
вот как проверяю на пустоту <input class='nazv_obkt'... и если пусто, то кнопка делается не активной, иначе не активной:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    $(document).on('blur', '.nazv_obkt', function() {
        $.each($('.nazv_obkt'), function() {
        if($(this).val() == "" || $(this).val() == null){
        //alert('Введите пустые поля');
        
        name_ras4et = 0;
        buttonOnAndOff()
        }else{
        //name.push($(this).val());
        name_ras4et = 1;
        buttonOnAndOff()
        }
        
    });
    });
Правда проверяется только последний input =( как сделать чтоб все проверились?
0
Develo0per
 Аватар для and_y87
424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,379
Записей в блоге: 98
10.07.2013, 11:12
Цитата Сообщение от Ig-or Посмотреть сообщение
как сделать чтоб все проверились?
JavaScript
1
$('.nazv_obkt').each( function(index, element) {
1
0 / 0 / 0
Регистрация: 27.06.2013
Сообщений: 35
10.07.2013, 16:53  [ТС]
Цитата Сообщение от and_y87 Посмотреть сообщение
JavaScript
1
$('.nazv_obkt').each( function(index, element) {
спасибо, сделал!!!
Все красиво получилось)))
Теперь осталось сделать вывод данных, завтра буду мучаться)))
0
Develo0per
 Аватар для and_y87
424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,379
Записей в блоге: 98
11.07.2013, 11:38
Ig-or, Научись получать удовольствие от кодинга и перестанешь мучитсья
0
0 / 0 / 0
Регистрация: 27.06.2013
Сообщений: 35
11.07.2013, 12:24  [ТС]
Цитата Сообщение от and_y87 Посмотреть сообщение
Ig-or, Научись получать удовольствие от кодинга и перестанешь мучитсья
я получаю удовольствие когда уже то что я сделал работает
0
Develo0per
 Аватар для and_y87
424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,379
Записей в блоге: 98
15.07.2013, 12:31
Цитата Сообщение от Ig-or Посмотреть сообщение
я получаю удовольствие когда уже то что я сделал работает
в этом ты не одинок

Не по теме:

но и от процесса нужно получать удовольствие...
Я мотивирую свой центр наслождения мыслями типа: "Щас не работает, но я ведь сделаю что бы оно работало, и тогда будет ещё круче чем щас" :)

0
0 / 0 / 0
Регистрация: 27.06.2013
Сообщений: 35
15.07.2013, 12:33  [ТС]
Цитата Сообщение от and_y87 Посмотреть сообщение
в этом ты не одинок

Не по теме:

но и от процесса нужно получать удовольствие...
Я мотивирую свой центр наслождения мыслями типа: "Щас не работает, но я ведь сделаю что бы оно работало, и тогда будет ещё круче чем щас" :)

спасибо за подсказку, я этим же буду пользоваться

P.S. Хорошая мотивация))
0
0 / 0 / 0
Регистрация: 27.06.2013
Сообщений: 35
23.12.2013, 16:38  [ТС]
Цитата Сообщение от Ig-or Посмотреть сообщение
спасибо за подсказку, я этим же буду пользоваться

P.S. Хорошая мотивация))
можно закрывать
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
23.12.2013, 16:38
Помогаю со студенческими работами здесь

Как открыть подменю без наложения строчек?
Приветствую! Вот такой вопрос хотел задать. Есть вертикальное меню, наводя мышь на ячейку, внизу...

Перевести несколько строчек кода из JavaScript'a на jQuery
Здравствуйте, подскажите, пожалуйста, в чем заключается суть проблемы, есть потребность перевести...

Сколько строчек кода, требуется написать для реализации фотогаллереи?
Сколько строчек кода, требуется написать для реализации допустим обычной фотогаллереи? Используя...

Определить количество строчек в блоке
overflow-y: hidden; При данном свойстве, через js, возможно определить. Уместился ли текст в...

Скрипт пересчета валют без создания второй страницы
Здравствуйте, нужен скрипт который будет пересчитывать деньги не создавая вторую страницу. Есть ли...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
17
Ответ Создать тему
Опции темы

Новые блоги и статьи
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru