我在这里有一个应用程序，您可以查看我遇到的问题的布局。当您打开应用程序时，如果单击“添加问题”按钮，您将看到它显示一个表格行，其中三列显示内容。
第一列显示选项文本框，第二列是数字文本框，第三列是 2 个按钮。问题是它在一行中并排显示三列。
相反，它应该在表格行中显示，三行，而不是三列。
所以目前它为每个表格行显示：
Option Textbox | Number Textbox | 2 Buttons
相反，它应该在表格行内：
Option Textbox
Number Textbox
2 Buttons
所以就像我说的，我需要一行内的三行，而不是三列。但是我如何使用下面的代码来实现这一点：
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);