CODEWITHSUNDEEP
jquery
Vikram
Vikram

Reputation: 47

jQuery for each element

I have a multiple table data fetch on a page which I want to submit into another table after some process.

My data is like :

    <table id="dayfields">
        <tr>
            <td class="f_name">Mr. XYZ</td>
            <td class="p_age">50/M</td>
            <td class="p_days"><input type="text" name="days" id="days" /></td>
        </tr>
        <tr>
            <td class="f_name">Ms. ABC</td>
            <td class="p_age">36/F</td>
            <td class="p_days"><input type="text" name="days" id="days" /></td>            
        </tr>
        <tr>
            <td class="f_name">Mr. KKK</td>
            <td class="p_age">40/M</td>
            <td class="p_days"><input type="text" name="days" id="days" /></td>            
        </tr>

      <tr><a href="#" id="save">Save</a></tr>

    </table>

And jQuery code am trying :

    <script type='text/javascript'>
        $(document).ready(function() {
            $('#save').click(function() {
                var f_name={};
                var p_age={};
                var p_days={};
                var k=0;

                $("#dayfields").each(function () { 
                    f_name[k]=$(this).val();
                    p_age[k]=$(this).val();
                    p_days[k]=$(this).val();
                    k++;
                });
            console.log(f_name);
            }); 
        });
   </script>

I found this code on Stackoverflow - but console gives me blank result.

Upvotes: 0

Views: 102

Answers (2)

Umesh Sehta
Umesh Sehta

Reputation: 10683

  1. You are using each loop on table change it to tr

  2. val() is not valid function for td so change it to .text() or .html()

  3. Find td from tr and add to array by class name or index check this:-

    $(document).ready(function() {
        $('#save').click(function() {
            var f_name={};
            var p_age={};
            var p_days={};
            var k=0;

            $("#dayfields tr:not(:last-child)").each(function () { 
                f_name[k]=$(this).find('.f_name').text();
                p_age[k]=$(this).find('.p_age').text();
                p_days[k]=$(this).find('.p_days').find('input').val();
                k++;
            });
        console.log(JSON.stringify(f_name));
        }); 
    });

Demo

Upvotes: 1

calinaadi
calinaadi

Reputation: 1466

First you should iterate tr's instead of tables.

Second you put the same thing in all arrays $(this).val().

Please check below code:

$(document).ready(function() {
            $('#save').click(function() {
                var f_name={};
                var p_age={};
                var p_days={};
                var k=0;

                $("#dayfields tr").each(function () { 

                    f_name[k]=$(this).find(".f_name").html(); 
                    p_age[k]=$(this).find(".p_age").html(); 
                    p_days[k]=$(this).find(".p_days").html(); 
                    k++;
                });
            console.log(f_name);
            }); 
        });

Upvotes: 0

Related Questions