3

is it possible to change the innerhtml of all the td when it has the input inside, i mean to take the input's value and apply it to it's td innerhtml, for example, here's the table and its input inside:

<table>
 <tr>
  <td><input value="test" /></td>
  <td>123</td>
 </tr>
</table>

to change it smth into this:

<table>
 <tr>
  <td>test</td>
  <td>123</td>
 </tr>
</table>

for all of the td and input values without applying id's and classes?! please pay attention that td innerhtml didnt change :) thank you all for the help! ;)

user745110
  • 119
  • 2
  • 11

3 Answers3

5

That's pretty easy.

Name your table first (to find it easily).

<table id="the_table">
 <tr>
  <td><input value="test" /></td>
 </tr>
</table>

Then you can do this:

$('#the_table td input[type="text"]').each(function() {
  var val = $(this).val();
  $(this).parent('td').html(val);
});

Live demo.

Explanation:

  1. find all inputs that are within <td> that are in this certain table.

  2. for each input:

    2.1 retrieve value from the input

    2.2 find first parent of the input that is a <td> tag and set its innerHTML to that value

Sergio Tulentsev
  • 226,338
  • 43
  • 373
  • 367
  • got one more problem! what if there are input whose types are: hidden, and i need to use just the inputs whose type is text?! 3 min left, will accept ur answer, no worries )) – user745110 Jan 07 '12 at 10:14
4

Yes, you can do it like this:

$('table td:has(:input:only-child)').each(function () {
    $(this).html($(':input', this).val());
});

It assumes there only is an input in the td. If that is not the case, then remove :only-child.

Explanation of table td:has(:input:only-child)

It says, take any td within a table, which has an input as the only child.

You can test it here: http://jsfiddle.net/eydtw/

Update: take the input which is not hidden.

$('table td:has(input[type!="hidden"])').each(function () {
    $(this).html($('input[type!="hidden"]', this).val());
});

http://jsfiddle.net/eydtw/1/

or: take the input which is text.

$('table td:has(input:text)').each(function () {
    $(this).html($('input:text', this).val());
});

http://jsfiddle.net/eydtw/3/

Lasse Espeholt
  • 17,622
  • 5
  • 63
  • 99
1
$.each($('table td'),function(){

    if($(this).children().length !=0)
    {

        var temp = $($(this).children()[0]).val();
        $(this).html(temp);

    }

})
Ali Foroughi
  • 4,540
  • 7
  • 42
  • 66