CODEWITHSUNDEEP
jqueryhtml-table
loviji
loviji

Reputation: 13080

using Jquery, replace html elements with own values

I have a table, has many rows. for example one of from rows(all rows are same):

<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>

Rows can be dynamically added by jquery after button click. I'm trying to do: after button click add new row(I do it) and replace previous row Html Elements(input type=text, textarea, select, input type=text, /[input type="checkbox" must be safe]) with its own values.

And after if i click on row(anyrow), i want to rollback previous operation. i.e. replace texts with html element. and htmlElement.val()=text.

Added after 30 minutes: I wrote for input type=text element and 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());
});

is this a good idea?

Upvotes: 0

Views: 5923

Answers (3)

Anurag
Anurag

Reputation: 141879

I am assuming something like this might work if I understood the question correctly.

Firstly, clear all click handlers from each row. Replace the last rows elements with their values. And finally add click handlers to each row to revert the values to elements again.

$('#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);
    );
}​

Since I am guessing all the HTML elements (text, checkbox, textarea, select) have the val() function, you can ignore the type of element you are dealing with while replacing. You need some way of telling which value belonged to which type of an element though when you will be reverting these back to elements.

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

Edit: You don't need to individually revert each item back, just clone the entire row and replace with that.

Replace back to elements should be fairly easy too. You could add classes to each row cell to indicate which type of element goes there.

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

Then in the replaceWithElement function, you could select cells by type, and replace with existing value:

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

Upvotes: 1

reinierpost
reinierpost

Reputation: 8591

I feel uneasy with your idea of dynamically adding and deleting rows. Generally it is cleaner to treat jQuery as a modifier of the look and feel of a page, and make the actual content static.

So I'd generally prefer to have a table with all the rows you're ever going to show, perhaps with class attributes to classify them, and a jQuery plugin to show/hide selections of rows based on the context. Your problem would disappear or at least easier to analyze. It will make your code more readable and more flexible.

But this may not be an option in your case.

Upvotes: 0

Petr Peller
Petr Peller

Reputation: 8826

Hope I understand you well. You want to insert into table pure text without the input? You could reach desired effect only with CSS (style inputs the way they'll look like text). But here is answer for your question

First of all add some ids or classes to better select desired tags. For example:

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

Than check if checkbox is checked (probably on an event) do:

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
   })
}

Upvotes: 0

Related Questions