Как мне добавить строку таблицы с помощью этого скрипта jquery?

ProgramBox

Как мне добавить строку таблицы с помощью этого скрипта jquery?

Post author:admin
Запись опубликована:11 мая, 2023
Post category:Вопросы по программированию

#jquery #html-table #row

#jquery #html-таблица #строка

Вопрос:

У меня есть скрипт, который преобразует список выбора в таблицу флажков;

 $('#edit-taxonomy-1').parent().append('<table id="checkboxes"><tbody><tr></tr></tbody></table>');

$('#edit-taxonomy-1 option').each(function() {
    var label = $(this).html();
    var value = $(this).attr('value');
    var ind = $(this).index();
    if (ind % 3 === 0  ) {
        $('#checkboxes tbody').append('</tr><tr><td><input type="checkbox" value="amp;#039; value amp;#039;">'   label   '</td>');
    }
    else {
        $('#checkboxes tbody').append('<td><input type="checkbox" value="amp;#039; value amp;#039;">'   label   '</td>');
    }
});

$('#edit-taxonomy-1').replaceWith($("#checkboxes"));

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

Вот пример:http://jsfiddle.net/cxVhz

Он показывает, что у меня есть и чего я хочу

Ответ №1:

Я думаю, append() делает что-то за кулисами, что может быть «исправлением» вашего html для вас, прежде чем он добавит его.

Попробуйте этот аналогичный подход:

 var tr = "";
$('#edit-taxonomy-1 option').each(function() {
    var label = $(this).html();
    var value = $(this).attr('value');
    var ind = $(this).index()   1;

    // continually build your checkbox and label
    var checkbox = '<input type="checkbox" value="amp;#039;'   value   'amp;#039;" />' 
          label;

    // keep adding to your tr
    tr  = "<td>"   checkbox   "</td>";
    if (ind % 3 == 0) {
        // append the tr and clear its value
        $('#checkboxes tbody').append('<tr>'   tr   '</tr>');
        tr = "";
    }
});

// if ind % 3 was never hit above, output what is within tr
if (tr != "")
{
    $('#checkboxes tbody').append('<tr>'   tr   '</tr>');
}

рабочий пример: http://jsfiddle.net/cxVhz/18

супер обновленное решение:

 $('#edit-taxonomy-1').parent().append('<table id="checkboxes"><tbody></tbody></table>');

$('#edit-taxonomy-1 option').each(function(index) {
    var $this = $(this);
    if (index % 3 === 0  ) {
        $('#checkboxes tbody').append('<tr></tr>');
    }
    $('#checkboxes tbody tr:last').append('<td><input type="checkbox" value="amp;#039;'   $this.val()   'amp;#039;" />'   $this.html()  '</td>');
});

$('#edit-taxonomy-1').replaceWith($("#checkboxes"));

рабочий пример: http://jsfiddle.net/cxVhz/40

1. это правильный ответ. Я делал то же самое в jsfiddle. Вот мое решение… 1 за то, что сделал это быстрее меня 🙂 jsfiddle.net/cxVhz/24

2. Да, вам нужно вставить туда правильный HTML, иначе браузер может сделать странные вещи, чтобы исправить это. Вы должны думать о DOM как о DOM, а не как о HTML. (ie. Вы не можете просто вставить туда открывающий и закрывающий теги, вы должны добавить элементы к родительскому элементу.) Вот мое решение с jQuery и некоторыми другими дополнениями: jsfiddle.net/cxVhz/27

3. Я тоже так думал, пока не увидел ответ suhairs, который является наиболее правильным ответом

4. @Drackir также отличное решение, еще более элегантное и прямое

5. Спасибо. 🙂 На самом деле существует множество способов улучшения кода OPs, но я полагаю, что это выходит за рамки вопроса. 😛

Ответ №2:

Вот быстрое и просто рабочее обновление без рефакторинга кода. http://jsfiddle.net/cxVhz/22 Редактировать: tr внутри объявления таблицы не требуется. Замените его на

 $('#edit-taxonomy-1').parent().append('<table id="checkboxes"><tbody></tbody></table>');

обновленная ссылка: http://jsfiddle.net/cxVhz/34

Ответ №3:

В предыдущих примерах были дополнительные TR, поэтому я подумал, что вы, возможно, захотите увидеть это решение. Удачи:http://jsfiddle.net/cxVhz/23

Ответ №4:

Похоже, что вы добавляете TD непосредственно к телу таблицы, а не к строке таблицы:

  $('#checkboxes tbody').append('<td><input type="checkbox" value="amp;#039; value amp;#039;">'   label   '</td>');

Редактировать:

     var row = $('<tr></tr>');
    $('#edit-taxonomy-1 option').each(function() {
        var label = $(this).html();
        var value = $(this).attr('value');
        var ind = $(this).index();
        if (ind % 3 === 0  ) {
            $('#checkboxes tbody').append(row);
            row = $('<tr></tr>');
            var td = $('<td><input type="checkbox" value="amp;#039; value amp;#039;">'   label   '</td>');
            row.append(td);
        }
        else {
            $('<td><input type="checkbox" value="amp;#039; value amp;#039;">'   label   '</td>').appendTo(row);
        }
    });
    if(row.html().length>0){
        $('#checkboxes tbody').append(row);
    }

Ответ №5:

Этот JS работает.

 $('#edit-taxonomy-1 option').each(function() {
    var label = $(this).html();
    var value = $(this).attr('value');
    var ind = $(this).index();
    if (ind % 3 === 0) {
        $('#checkboxes tbody').append('<tr></tr>');
    }
    $('#checkboxes tbody tr:last-child').append('<td><input type="checkbox" value="amp;#039; value amp;#039;">'   label   '</td>');
});