Question

我有一个应用程序here，您可以查看我遇到的问题的布局。当您打开应用程序时，如果单击“添加问题”按钮，您将看到它显示一个包含三列显示内容的表格行。

第一列显示选项文本框，第二列是数字文本框，第三列是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);

Answer 1

表格行由开始和结束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>");

每个都会在你的表格中创建一行。

Answer 2

为什么不在单元格中放置一个表并将其赋予三行，或者尝试将rowspan属性与其他单元格一起使用，以便跨越3行。

如何在表行中显示三行，而不是三列

2 个答案: