Copy contents of one field to another using jQuery

Question

I have a table structure like:

<table id='myTable'>
    <thead>
        <tr>
              <th class='name'>Name</th>
              <th class='nick-name'>Nick Name</th>
              <th class='age'>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
              <td class='name'>Ilona</td>
              <td class='nick-name'>Baby Doll</td>
              <td class='age'>21</td>
        </tr>
        <tr>
              <td class='name'>Sieraa</td>
              <td class='nick-name'></td>
              <td class='age'>24</td>
        </tr>
        <tr>
              <td class='name'>Britney</td>
              <td class='nick-name'>Blondie</td>
              <td class='age'>27</td>
        </tr>
        <tr>
              <td class='name'>Kate</td>
              <td class='nick-name'>Night Queen</td>
              <td class='age'>19</td>
        </tr>
        <tr>
              <td class='name'>Dani</td>
              <td class='nick-name'></td>
              <td class='age'>23</td>
        </tr>
        <tr>
              <td class='name'>Aliee</td>
              <td class='nick-name'></td>
              <td class='age'>26</td>
        </tr>
        <tr>
              <td class='name'>Brandi</td>
              <td class='nick-name'></td>
              <td class='age'>27</td>
        </tr>
    </tbody>
</table>

As some Nick Name fields are empty, I want to display the value of Name in Nick Name if they are empty.

Eg: In Second Row of Table Body, The Nick Name field is empty, The Name field contains Sierra. So, I want to display Sierra in Nick Name field instead of leaving it empty.

How can I achieve this using jQuery or JavaScript

tmaximini · Accepted Answer · 2013-11-17T13:38:08.743

2

jQuery:

this only works when the .name is always the exact previous element of .nick-name like in your structure

$('.nick-name').each(function () {
 if ($(this).text().length === 0) {
   $(this).text($(this).prev().text());
 }
});

This works when both .name and .nick-name have the same parent

$('.nick-name').each(function () {
 if ($(this).text().length === 0) {
   var name = $(this).parent().find('.name').text();
   $(this).text(name);
 }
});

You should read up on DOM Traversing with jQuery, there is lots of stuff you can do to get to your elements.

jsfiddle: http://jsfiddle.net/sX4yj/

edited Nov 17 '13 at 13:38

answered Nov 17 '13 at 11:41

tmaximini

8,403
6
47
69

This is nice, if you could give me example of using _class name_ instead of `prev()` then it'd be more helpful in my case. I tried `$(this).text($('.name').text());` instead of `$(this).text($(this).prev().text());` but it displays all the value. I am still n00b. – Nov 17 '13 at 12:25
updated answer. and being a n00b at something is the first step to actually get good at something, so keep on doing stuff ;) – tmaximini Nov 17 '13 at 13:39

score 0 · Answer 2 · edited May 23 '17 at 11:54

0

This should help

$('#myTable tr').each(function(){

        var nickname = $(this).find('.nick-name').html();
        alert(nickname);

});

Refer: How to get a table cell value using jQuery?

edited May 23 '17 at 11:54

Community

1
1

answered Nov 17 '13 at 12:03

goutham2027

98
4

Copy contents of one field to another using jQuery

2 Answers2