используя Jquery, замените html-элементы собственными значениями - PullRequest
Новая
       12

используя Jquery, замените html-элементы собственными значениями

0 голосов
/ 11 марта 2010

У меня есть таблица, есть много строк. например, один из строк (все строки одинаковы): 

<tr>
    <td>
        <input type="text" />
    </td>
    <td>
        <textarea cols="40" rows="3" ></textarea>
    </td>
    <td>
        <select>
            //options
        </select>
    </td>
    <td>
        <input type="text" />
    </td>
    <td>
        <input type="checkbox" />
    </td>
</tr>

Строки могут быть динамически добавлены с помощью jquery после нажатия кнопки. Я пытаюсь сделать: после нажатия кнопки добавить новую строку (я делаю это) и заменить предыдущую строку Элементы HTML ( тип ввода = текст, текстовая область, выберите, тип ввода = текст, / [тип ввода = "флажок" должен быть в безопасности] ) со своими собственными значениями.

И после того, как я нажму на строку (anyrow), я хочу откатить предыдущую операцию. заменить текст на HTML-элемент. и htmlElement.val () = текст.

Добавлено через 30 минут: Я написал для input type = text element и textarea element this. 

$("#btnAdd").click(function() {
       $input = $('#mainTable tbody>tr:last').closest("tr").find("td > input:text");
       $input.replaceWith($input.val());
       $textArea = $('#mainTable tbody>tr:last').closest("tr").find("td > textarea");
       $textArea.replaceWith($textArea.val());
});

это хорошая идея?

Ответы [ 3 ]

1 голос
/ 11 марта 2010

Я предполагаю, что что-то подобное может сработать, если я правильно понял вопрос.

Во-первых, очистите все обработчики кликов из каждой строки. Замените последние строки элементов их значениями. И, наконец, добавьте обработчики кликов в каждую строку, чтобы снова вернуть значения в элементы. 

$('#btnAdd').click(function() {
    $('#mainTable tr').unbind('click');

    var lastRow = $('#mainTable tr:last');
    // its simpler to clone now, and just replace entire row later when needed
    var clonedRow = lastRow.clone();

    replaceWithValues(lastRow);

    $('#mainTable tr').click(function() {
        $(this).replaceWith(clonedRow);
    );
}​

Поскольку я предполагаю, что все элементы HTML (text, checkbox, textarea, select) имеют функцию val(), вы можете игнорировать тип элемента, с которым имеете дело при замене. Вам нужен какой-то способ сообщить, какое значение принадлежит какому типу элемента, хотя, когда вы будете возвращать их обратно элементам. 

function replaceWithValues(row) {
    var elements = $('td > *', row);
    elements.each(function() {
        var value = $(this).val();
        $(this).replaceWith(value);
    });
}

Редактировать : вам не нужно индивидуально возвращать каждый элемент обратно, просто клонируйте всю строку и замените ее.

Заменить обратно на элементы тоже должно быть довольно просто. Вы можете добавить классы в каждую ячейку строки, чтобы указать, какой тип элемента идет туда. 

<tr>
    ...
    <td class="textField">
        <input type="text" />
    </td>
   ...

Затем в функции replaceWithElement можно выбрать ячейки по типу и заменить существующим значением: 

function replaceWithElements(row) {
    $('.textField', row).each(function() {
        var element = $("<input type='text' />").attr('value', $(this).text());
        $(this).empty().replaceWith(element);
    });
    $('.selectField') ...
    $('.textAreaField') ...
}

0 голосов
/ 11 марта 2010

Мне неловко от вашей идеи динамического добавления и удаления строк. Как правило, удобнее рассматривать jQuery как модификатор внешнего вида страницы и делать фактический контент статичным.

Поэтому я бы предпочел иметь таблицу со всеми строками, которые вы когда-либо собираетесь показывать, возможно, с атрибутами класса для их классификации, и плагин jQuery для отображения / скрытия выбранных строк на основе контекста. Ваша проблема исчезнет или, по крайней мере, будет легче проанализировать. Это сделает ваш код более читабельным и более гибким.

Но это не может быть вариантом в вашем случае.

0 голосов
/ 11 марта 2010

Надеюсь, я вас хорошо понимаю. Вы хотите вставить в таблицу чистый текст без ввода? Вы можете достичь желаемого эффекта только с помощью CSS (стиль ввода будет выглядеть как текст). Но вот ответ на ваш вопрос

Прежде всего добавьте id s или class es, чтобы лучше выбрать нужные теги. Например: 

<input type="text" class="text"/>
<input type="checkbox" class="save" />

Затем, если флажок установлен (возможно, для события), выполните: 

if($('input.save:checked').val() !== null) //checkbox is checked
{
   $('input.text').each(function()  //for each text input do ...
   {
      var inputValue = $(this).val();  //get the value
      $(this).parent().html(inputValue);  //insert the value instead of input
   })
}
...