Как изменить значение Div Id при добавлении строк в таблицу - PullRequest
Новая
       2

Как изменить значение Div Id при добавлении строк в таблицу

3 голосов
/ 11 сентября 2011

У меня есть проблема, и решение этой проблемы немного выходит за рамки моих возможностей программирования ... Надеюсь, кто-то может мне помочь.

У меня есть таблица с div внутри каждой ячейки.Мне нужно, чтобы div id динамически изменялся при добавлении строки или столбца в таблицу.Div id змеится вокруг таблицы, поэтому при добавлении новой строки или столбца div id должны измениться.Идентификаторы div используются в Javascript, поэтому они должны динамически изменяться, иначе код не будет работать.

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

2X2 Таблица с идентификаторами дивидендов, которые возвращаются:

|div id = 1 |div id = 2 |
|div id = 4 |div id = 3 |

Таблица 2X3 с добавленным новым столбцом с указанием того, как должны выглядеть идентификаторы div:

|div id = 1 |div id = 2 |div id = 3 |
|div id = 6 |div id = 5 |div id = 4 |

Также, если у вас есть другая идея о том, как это может работать, дайте мне знать.Я открыт для всех предложений.

Обновление ...

Я добавил jsfiddle с небольшим примером моего кода и того, как он используется.На данный момент я думаю, у меня есть два варианта.

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

Мой второй вариант - это то, что упоминалось здесь несколько раз.и измените способ, которым div связывается с кодом сброса jQuery.

Надеюсь, это поможет.

http://jsfiddle.net/irocmon/wzb5U/

Ответы [ 2 ]

0 голосов
/ 11 сентября 2011

Я только что написал короткую демонстрацию для вас по адресу http://jsfiddle.net/65Uwh/. Он проходит по всем строкам, проверяет, является ли он нечетным или четным, и соответствующим образом переименовывает идентификаторы (и устанавливает значение диапазона в каждом divчтобы вы могли видеть число).

Вы можете легко добавить кнопку, которая при нажатии добавляет строку в таблицу, которая является точной копией, например, последней строки (с помощью $("tbody tr:last-child", $(this)).clone();) и добавляет его к tbody, затем вызывает функцию.Столбцы должны быть такими же легкими.

0 голосов
/ 11 сентября 2011

не знаю, правильно ли я понял ваш вопрос, но вот пример, который я придумал:

http://jsfiddle.net/zUdZR/2/

HTML: 

<table border="1">
    <tr><td><div></div></td><td><div></div></td></tr>
    <tr><td><div></div></td><td><div></div></td></tr>
</table>
<button id="r">add row</button><button id="c">add column</button>

JQuery: 

$(function(){
    updateIDs();
    $('#r').click(function(){
        $('table').append($('table tr:last-child').clone());
        updateIDs();
    });

    $('#c').click(function(){
        $('table td:last-child').after('<td><div></div></td>');
        updateIDs();
    });


    function updateIDs(){
        $('div').each(function(i){
            var $d = $(this);
            var even = ($d.closest('tr').index()+1)%2==0;
            var tdl = $d.closest('tr').find('td').length;
            var tdi = $d.closest('td').index()+1;
            var id = i+1;
            id = even ?(id-tdi+1)-tdi+tdl:id;
            $(this).text(id);
        });   
    }
});
...