using Jquery, replace html elements with own values

Question

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?

I know, my English isn't well. but i'm trying communicate with you — loviji
– loviji, Commented Mar 11, 2010 at 8:27
can you rephrase this part? what are you trying to do here - "and replace previous row Html Elements(input type=text, textarea, select, input type=text, /[input type="checkbox" must be safe]) with its own values." — Anurag
– Anurag, Commented Mar 11, 2010 at 8:42
replace in previous row (last row) html elements with html_elements_values. for example. <input type="text" val="exampleValue"> must be rapleced with exampleValue. — loviji
– loviji, Commented Mar 11, 2010 at 8:46
In the rows, are the inputs always in the order of: input:text, textarea, select, input:text, input:checkbox — Psytronic
– Psytronic, Commented Mar 11, 2010 at 8:55

Anurag · Accepted Answer · 2010-03-11 19:53:21Z

1

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

edited Mar 11, 2010 at 19:53

answered Mar 11, 2010 at 9:36

Anurag

142k37 gold badges223 silver badges262 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

loviji Over a year ago

Thanks. you understand my question well. and answer looks like true. i'm trying to use your idea.

loviji Over a year ago

I will use previous method, because it's more closer to my needs. I replace some peace of code. var element = $("<input type='text' value=" + $(this).text() + "/>"); var element = $("<input type='text' />").attr('value', this.text()); this one bad working. input element created, but value sometimes can't showed. also replaceWithElements(row) working bad in IE. I'm trying to analyze this problem.

loviji Over a year ago

i solve one of problems : $("<input type='text' />").attr('value', $.trim($(this).text()));

Anurag Over a year ago

yea you are right. Inside the each() call, the elements are not jQuery wrapped. You need to use $(this).text() like you've done.

Petr Peller · Accepted Answer · 2010-03-11 09:01:21Z

0

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

answered Mar 11, 2010 at 9:01

Petr Peller

8,86610 gold badges55 silver badges66 bronze badges

Comments

reinierpost · Accepted Answer · 2010-03-11 09:01:46Z

0

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.

answered Mar 11, 2010 at 9:01

reinierpost

8,6671 gold badge43 silver badges73 bronze badges

Collectives™ on Stack Overflow

using Jquery, replace html elements with own values

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related