How to populate javascript model from html table data

Question

I am having follwoing type of dynamic UI through table on my page

<table id="tblUserAttendance">
 <tr id="135"> <td> 1 </td>
               <td> Student 1 </td> 
               <td> <input checked="checked" name="rdo135" type="radio" value="true" /> Pre 
                    <input name="rdo135" type="radio" value="false" /> Absent
               </td>
 </tr>
<tr id="136"> <td> 1 </td>
               <td> Student 1 </td> 
               <td> <input checked="checked" name="rdo136" type="radio" value="true" /> Pre 
                    <input name="rdo136" type="radio" value="false" /> Absent
               </td>
 </tr>
<tr id="137"> <td> 1 </td>
               <td> Student 1 </td> 
               <td> <input checked="checked" name="rdo137" type="radio" value="true" /> Pre 
                    <input name="rdo137" type="radio" value="false" /> Absent
               </td>
 </tr>
</table>

I want to populate following type of model using above table dynamically to post data to server.

var student = {};
  student.Id = Id;//where Id may be equal to 135
  studnet.IsPresent = true;// if that particualar radio button is checked  else false

i want to create array of such students which should be equal to the number of rows in the above table.

Can you please tell how to achieve this.

you are going the wrong way. the view renders data from the controller not the other way. — Sagiv Ofek
– Sagiv Ofek, Commented Jun 2, 2012 at 9:24

m1kael · Accepted Answer · 2012-06-02 09:52:17Z

1

This jQuery will create you an array of student objects:

<script type="text/ecmascript">
    var result = [];
    var students = $.each($('#tblUserAttendance tr'), function (i, e) {
        var studentData = $('td', e);
        var checks = $('input', studentData[2]);
        var student = { id: e.id, name: studentData[1].textContent, active: checks[0].checked };
        result[i] = student;
    });
</script>

edited Jun 2, 2012 at 9:52

answered Jun 2, 2012 at 9:40

m1kael

2,8511 gold badge17 silver badges14 bronze badges

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

5 Comments

Abhi Over a year ago

great @m1kael , so using above query now we can have id and name of each student , but how to get the value of radio button group , can u suggest a jquery selector within the same answer to achieve that

Abhi Over a year ago

I think this line var student = { id: e.id, name: studentData[1].textContent }; should be var student = { id: e.id, IsPresent: studentData[1].is(':checked') }; Am I right ?

m1kael Over a year ago

Updated my answer. .is(':checked') would do it too but only when called on an input, not a td (studentData[1] is a td).

RichardTowers Over a year ago

My approach is the same, so I won't bother adding a separate answer. jsfiddle.net/RichardTowers/s3rzy

Abhi Over a year ago

Thanks Richard + 1 for ur approach

Collectives™ on Stack Overflow

How to populate javascript model from html table data

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related