Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.07.2016, 14:31
Интересующийся
Отправить личное сообщение для drno-reg Посмотреть профиль Найти все сообщения от drno-reg
 
Регистрация: 16.02.2016
Сообщений: 23

Необхоим пример html table с возможность добавить строку
Здравствуйте.

Хочу поместить на форму объект типа таблицу с возможностью добавлять новые строки и удалять добавленные.

Подскажите каким образом это лучше сделать.

На текущий момент удалось найти следующую библиотеку

//code.jquery.com/jquery-1.12.3.js
https://cdn.datatables.net/1.10.12/j...aTables.min.js
https://cdn.datatables.net/1.10.12/c...Tables.min.css

все бы ничего, НО при нажатии кнопки новая строка появляется, НО после сразу же пропадает

<script type="text/javascript">
                $(document).ready(function() {
                    var t = $('#example').DataTable();
                    var counter = 1;

                    $('#addRow').on( 'click', function () {
                        t.row.add( [
                            counter +'.1',
                            counter +'.2',
                            counter +'.3',
                            counter +'.4',
                            counter +'.5',
                            counter +'.6'
                        ] ).draw(false);

                        counter++;
                    } );

                    // Automatically add a first row of data
                    // $('#addRow').click();
                } );
        </script>


<button id="addRow" class="btn btn-success" type="submit"><i class="glyphicon glyphicon-ok-sign" ></i> Добавить строку</button>


        <table id="example" class="display" cellspacing="0" width="100%">
            <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
                <th>Column 5</th>
                <th>Column 6</th>
            </tr>
            </thead>
            <tfoot>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
                <th>Column 5</th>
                <th>Column 6</th>
            </tr>
            </tfoot>
        </table>


Подскажите в чем может быть проблема.
Ответить с цитированием
  #2 (permalink)  
Старый 08.07.2016, 14:44
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Футер определяется до тбоди, и в футере обычные td ну и само тбоди надо вообще-то нарисовать. Строка пропадает видимо потому, что пятница. )))
Ответить с цитированием
  #3 (permalink)  
Старый 08.07.2016, 14:54
Интересующийся
Отправить личное сообщение для drno-reg Посмотреть профиль Найти все сообщения от drno-reg
 
Регистрация: 16.02.2016
Сообщений: 23

скопировал как было в примере, от себя добавил только Column 6...

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
                <th>Column 5</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
                <th>Column 5</th>
            </tr>
        </tfoot>
    </table>
Ответить с цитированием
  #4 (permalink)  
Старый 08.07.2016, 15:13
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Чтобы добавить строки, нужно место куда добавлять. Если там нет интерфейса выбора строки, то добавить можно или в начало, или в конец. А чтобы удалить строку, такой интерфейс уже нужен. Обычно чекбоксами рисуют. То есть вопрос вовсе не решится когда строка добавится. Это только начало геморроя.

Ищи по словам datagrid что-то более мощное )))
Ответить с цитированием
  #5 (permalink)  
Старый 08.07.2016, 19:42
Интересующийся
Отправить личное сообщение для drno-reg Посмотреть профиль Найти все сообщения от drno-reg
 
Регистрация: 16.02.2016
Сообщений: 23

проблему с динамическим добавлением строки решить удалось

<script src="js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="js/dataTables.bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jquery.dataTables.min.css">
<link rel="stylesheet" href="css/dataTables.bootstrap.min.css">

<br>
<br>
<br>

<script type="text/javascript">
$(document).ready(function() {
    var dataSet = [
        [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25"],
        [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25"],
        [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12"],
        [ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29"]
    ];

var t = $('#example').DataTable(

        {
            data: dataSet,
            columns: [
                { title: "col1" },
                { title: "col2" },
                { title: "col3" },
                { title: "col4" },
                { title: "col5" }
            ]
        }

);
var counter = 1;

$('#addRow').on( 'click', function () {
t.row.add( [
counter +'.1',
counter +'.2',
counter +'.3',
counter +'.4',
counter +'.5'
] ).draw( false );

counter++;
} );

// Automatically add a first row of data
$('#addRow').click();
} );
</script>
<div class="container">
<button id="addRow" class="btn btn-success"><i class="glyphicon glyphicon-ok-sign" ></i> Добавить строку</button>

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th>Имя</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <th>Имя</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
    </tr>
    </tfoot>
</table>
</div>

</body>
</html>



но теперь открылся вопрос как информацию из новой строки превратить в insert в БД
Ответить с цитированием
  #6 (permalink)  
Старый 08.07.2016, 20:53
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Школота штоле к пересдаче ЭГЕ готовится? Ну так не делается, чтобы сперва запихать данные в хтмл, а потом доставать их оттудова, чтобы запихать в БД. Такое может придумать только какой-нить дебильный автор дебильного учебника, типа а вот так сделай, пофигу зачем. )))

Перед тем как запихивать данные в хтмл, надо просто запомнить что запихано и где, по индексам строк и массивов например. А потом просто берешь этот массив и грузишь в сервер через json.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как поместить код как текст в строку ввода html, javascript-ом? NiceIce Общие вопросы Javascript 11 19.06.2016 02:05
Пример кода сохранения в базу html страницы генерированного посредством JavaScripts wayzer Серверные языки и технологии 2 06.09.2012 16:46
Как добавить javascript-код через html()? Ceргей jQuery 2 04.01.2012 02:37
Заменить символы в строке, затем преобразовать строку в html majahead jQuery 2 03.03.2011 16:52
Вывод JS значения в одну строку в HTML velo Общие вопросы Javascript 7 15.12.2009 03:57