Как создать Div, содержащие таблицы с динамически добавляемыми и удаляемыми строками? - JSfiddle добавлен - PullRequest
Новая
       1

Как создать Div, содержащие таблицы с динамически добавляемыми и удаляемыми строками? - JSfiddle добавлен

5 голосов
/ 30 декабря 2011

В JSFiddle я пытаюсь динамически генерировать div, используя javascript.Эти div будут содержать таблицы, где последние две строки могут быть увеличены с помощью кнопки добавления.

Я пробовал код в скрипте.Функция ins_row () используется для добавления в таблицу строк, сгенерированных внутри элементов div.

Функция addEvent () используется для создания элементов div *

При нажатии кнопки «Добавить продукт»Будет создан div, содержащий таблицу с одной строкой.

При нажатии кнопки добавления последние две строки должны продолжать добавляться в соответствии с кликами.Если нажата кнопка удаления прямо в div, вся таблица должна быть удалена, и div должен быть удален.

Когда нажата кнопка удаления прямо в сгенерированные строки, следует удалить только эту строку, а не весь div.

Проблема

Проблема в том, что генерируются элементы div с таблицей, но я не мог понять, как добавить строки в таблицу.

Посмотретьв действии здесь

Ожидаемый вывод

Снимок экрана ожидаемого результата http://img338.imageshack.us/img338/3863/samplea.png

Примечание. Я только что вставил внешний файл JS в столбец javascript вышеу меня нет ссылки на ресурс.

Текущий вывод

Скриншот текущего результата http://img824.imageshack.us/img824/8015/expresult.png

Надеюсь, я поставил вопрос понятным, если что-тоне ясно, пожалуйста, дайте мне знать

Ответы [ 5 ]

4 голосов
/ 04 февраля 2012

Полагаю, я правильно понял ваше требование.
Попробуйте эту скрипку http://jsfiddle.net/Kucuk/14/

Хотя она использует jquery - это всего лишь пример того, что вы, вероятно, могли бы основывать на своем собственном коде.Это все выполнимо в простом старом JavaScript, если вы этого хотите.Стиль немного сбит с толку, но я надеюсь, что вы справитесь.

Дайте мне знать, если это вам как-то поможет.

1 голос
/ 07 февраля 2012

Попробуйте эту скрипку , чтобы увидеть, работает ли она для вас.

В этом примере, когда вы нажимаете кнопку добавления продукта, все 4 текстовых поля создаются с добавлением дополнительных строк и удалением div.кнопки.

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

Когда количество строк в продукте превышает 1, кнопка удаления элемента Div скрыта.и отображается снова, когда количество строк равно 1.

1 голос
/ 05 февраля 2012

Обычно я использую функцию jQuery appendTo () вместе с фиктивной HTML-структурой.Я сохраняю это в переменной и продолжаю манипулировать атрибутами.

Чтобы понять, о чем я говорю, просто проверьте эту скрипку: http://jsfiddle.net/GGS4N/ Это ответ на другой вопрос. Сгладить анимацию переключения jQuery? .Сконцентрируйтесь на методологии, приведенной ниже:

  1. Чтобы создать фиктивную структуру HTML (универсальную по своей природе).
  2. На желаемое событие, запуск заполнения и манипулирование динамическими элементами вdom, предоставляя им идентификаторы и манипулируя другими конкретными атрибутами, и, как видно из скрипта, даже анимируя их.

Если вы предпочитаете необработанный JS, как видно из вашего кода, вы можете реализоватьта же функциональность в сыром JS тоже!:)

0 голосов
/ 07 февраля 2012

Другое чистое решение JS 

<html>
    <body>
        <script>
            var tblCount = 0
            var tblIdStr = "productTbl";

            function removeRow(id, rowNumber) {
                var el = document.getElementById(id);
                el.deleteRow(rowNumber);
            }

            function addTable() {
                            ++tblCount;
                tblId = tblIdStr + tblCount;
                var args = "'" + tblId + "'";
                var tblHtml = '<tr><td>Product name</td><td>Price</td><td>Competitor</td><td>Price</td></tr><tr><td><input type="text"></td><td><input type="text"><td><input type="text"></td><td><input type="text"></td><td><input type="button" value="Add" onclick="addRow(' + args + ')"></td><td></td></tr>'
                var tbl = document.createElement("table");
                tbl.setAttribute("id", tblId);
                document.getElementById("container").appendChild(tbl)
                document.getElementById(tblId).innerHTML = tblHtml;

            }

            function addRow(id) {
                var el = document.getElementById(id)
                var rowCount = el.rows.length;
                var row = el.insertRow(rowCount);
                //console.log(row)
                var args = "'" + id + "'" + "," + rowCount;
                var tblRowHtml = '<td colspan=2></td><td><input type="text"></td><td><input type="text"></td><td><input type="button" value="remove" onclick="removeRow(' + args + ')"></td>';
                //el.rows[rowCount].setAttribute("id", rowId);
                el.rows[rowCount].innerHTML = tblRowHtml

            }
        </script>
        <input type="button" value="Add new product table" onclick="addTable()">
        <div id="container">

        </div>
    </body>
</html>
0 голосов
/ 31 января 2012

Это больше похоже на то, что вы ожидали?

http://jsfiddle.net/7AeDQ/81/

Я добился этого, добавив стили для расширения таблицы и ячейки, содержащей кнопки.Я также изменил кнопки на тип ввода = «кнопка».

Надеюсь, это работает для вас.

РЕДАКТИРОВАТЬ: Я только что заметил, чтоЯ перепутал ваш ожидаемый результат и настоящий результат.Работаем над ожидаемым результатом сейчас.

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

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

...