Question

I have a problem with my jquery parse for my table. I belive my parse at the moment is like this:

<table id="qandatbl">
<thead>
<tr>
    <th class="qid">Question No</th>
    <th class="question">Question</th>
    <th class="option">Option Type</th>
    <th class="noofanswers">Number of Answers</th>
    <th class="answer">Answer</th>
    <th class="noofreplies">Number of Replies</th>
    <th class="weight">Number of Marks</th>
    <th class="image">Image</th>
    <th class="video">Video</th>
    <th class="audio">Audio</th>
</tr>
</thead>
<tbody>
<tr></tr>
</tbody>
<tbody>
<tr></tr>
</tbody>
<tbody>
<tr></tr>
</tbody>
</table>

It is creating a <tbody> for each row. Instead it should display one <tbody> and display all the <tr> in the <tbody>. I want it like below:

<table id="qandatbl">
<thead>
<tr>
    <th class="qid">Question No</th>
    <th class="question">Question</th>
    <th class="option">Option Type</th>
    <th class="noofanswers">Number of Answers</th>
    <th class="answer">Answer</th>
    <th class="noofreplies">Number of Replies</th>
    <th class="weight">Number of Marks</th>
    <th class="image">Image</th>
    <th class="video">Video</th>
    <th class="audio">Audio</th>
</tr>
</thead>
<tbody>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
</table>

How can I achieve this above?

Below is the jquery code which controls the <tbody> and <tr>.

    function insertQuestion(form) {   

        var $tbody = $("<tbody class='tbody'></tbody>");
        var $tr = $("<tr class='optionAndAnswer'></tr>");
        var $qid = $("<td class='qid'>" + qnum + "</td>");
        var $question = $("<td class='question'></td>");
        var $noofanswers = $("<td class='noofanswers'></td>");
        var $options = $("<td class='option'></td>");
        var $answer = $("<table class='answer'></table>");
        var $replies = $("<td class='noofreplies'><div class='wrapper'></div></td>");
        var $weight = $("<td class='weight'></td>");
        var $image = $("<td class='image'></td>");
        var $video = $("<td class='video'></td>");
        var $audio = $("<td class='audio'></td>");

    $('.gridTxt', context).each( function() {

     var $this = $(this);
     var $optionsText = $("<input type='text' class='gridTxtRow maxRow' readonly='readonly' /><span href='#' class='showGrid'>[Open Grid]</span>").attr('name',$this.attr('name'))
                     .attr('value',$this.val())

    $options.append($optionsText);
    $questionType = $this.val();

    });

   $('.numberAnswerTxt', context).each(function() {
        var $this = $(this);
        var $noofanswersText = '';

        if ($questionType == 'True or False' || $questionType == 'Yes or No'){

    $noofanswersText = $("<span class='naRow string' style='display: block;'>Only 1 Answer</span><input type='text' class='numberAnswerTxtRow answertxt' style='display: none;' onkeyup='numberKeyUp(this)' onkeypress='return isNumberKey(event)' onChange='getButtons()'>").attr('name', $this.attr('name')).attr('value', $this.val())

    }else{

    $noofanswersText = $("<span class='naRow string' style='display: none;'>Only 1 Answer</span><input type='text' class='numberAnswerTxtRow answertxt' style='display: block;' onkeyup='numberKeyUp(this)' onkeypress='return isNumberKey(event)' onChange='getButtons()'>").attr('name', $this.attr('name')).attr('value', $this.val())   

    }

        $noofanswers.append($noofanswersText);

        }); 


    $('#questionTextArea').each( function() {

    var $this = $(this);
    var $questionText = $("<textarea onload='resizeTxt'></textarea>").attr('name',$this.attr('name'))
                   .attr('value',$this.val())

    $question.append($questionText);



        $tbody.append($tr); 
        $tr.append($qid);
        $tr.append($question);
        $tr.append($options);
        $tr.append($noofanswers);
        $tr.append($answer);
        $tr.append($replies);
        $tr.append($weight);
        $tr.append($image);
        $tr.append($video);
        $tr.append($audio);    
        $('#qandatbl').append($tbody);

    }

Below is html which sorts out the <thead> and the table where the jquery <tbody> and <tr> will go into:

<table id="qandatbl" align="center">
<thead>
<tr>
    <th class="qid">Question No</th>
    <th class="question">Question</th>
    <th class="option">Option Type</th>
    <th class="noofanswers">Number of Answers</th>
    <th class="answer">Answer</th>
    <th class="noofreplies">Number of Replies</th>
    <th class="weight">Number of Marks</th>
    <th class="image">Image</th>
    <th class="video">Video</th>
    <th class="audio">Audio</th>
</tr>
</thead>
</table>

Answer 1

You could just add the <tbody> to the html:

<table id="qandatbl" align="center">
   <thead>
    <tr>
       <th class="qid">Question No</th>
       <th class="question">Question</th>
       <th class="option">Option Type</th>
       <th class="noofanswers">Number of Answers</th>
       <th class="answer">Answer</th>
       <th class="noofreplies">Number of Replies</th>
       <th class="weight">Number of Marks</th>
       <th class="image">Image</th>
       <th class="video">Video</th>
       <th class="audio">Audio</th>
    </tr>
   </thead>
   <tbody class="tbody"></tbody>
 </table>

Then use this:

function insertQuestion(form) {   

var $tbody = $('#qandatbl tbody');

//rest of your function

http://jsfiddle.net/QGBw3/1/