Question

I have an application here for you to be able to see the layout of a problem I am having. When you open the application, if you click on the “Add Question” button, you will see that it displays a table row with three columns showing the content.

The first column shows Options textbox, second is a number textbox and third is 2 buttons. The problem is that it is displaying three columns in row going side by side.

It should be instead be showing within the table row, three rows, not three columns.

So currently it is showing this for each table row:

Option Textbox | Number Textbox | 2 Buttons

Instead it should be inside a table row:

Option Textbox

Number Textbox

2 Buttons

So like I said, I need three rows within the row, not three columns. But how can i achieve this with the code I have below:

var $tbody = $('#qandatbl > tbody'); 
            var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
            var $noofanswers = $("<tr><td class='noofanswers'></td></tr>");
            var $options = $("<tr><td class='option'></td></tr>");
            var $answer = $("<tr><td class='answer'></td></tr>");
            var $extratr = $("<tr></tr>");

        /*Below is an example of a function that worked before I included the <tr> tag
 but stopped working after including the <tr> tags */

      $('.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);

            }); 

            $tr.append($extratr);
            $extratr.append($options);
            $extratr.append($noofanswers);
            $extratr.append($answer);
            $tbody.append($tr); 

Answer 1

A table row is denoted by an opening and closing tr so you need to make this change:

var $noofanswers = $("<tr><td class='noofanswers'></td></tr>");
var $options = $("<tr><td class='option'></td></tr>");
var $answer = $("<tr><td class='answer'></td></tr>");

each of those will create a row in your table.