Question

我遇到了有选项和答案功能的问题。如果我选择一个包含多个按钮输出的选项，例如，如果我选择选项20，它将显示20个按钮，我得到的问题是在表格列的底部，空间会略微下降。只有在更改选项然后整个空间保持不变时才会执行此操作。我的问题是如何在选项更改时停止表格列底部的空格来增加？

问题的表列称为extratd，在此表列中是一个称为答案的嵌套表。我希望extratd现在是vertical-align:top;。

下面是HTML / jquery代码，其中包含表格行，表格以及包含字母按钮显示的代码：

var $tr = $("<tr class='optionAndAnswer' align='center'>");
var $td = $("<td width='16%' class='extratd'>");
var $answer = $("<table class='answer'><tbody><tr><td class='ans'>3. Answer:</td></tr></tbody></table>");
var $this, i = 0,
    $row, $cell;
$('#optionAndAnswer .answers').each(function () {
    $this = $(this);
    if (i % 6 == 0) {
        $row = $("<tr/>").appendTo($answer);
        $cell = $("<td/>").appendTo($row);
    }
    var $newBtn = $(("<input class='answerBtnsRow answers' type='button' style='display:%s;' onclick='btnclick(this, " + gQuestionIndex + ");' />").replace('%s', $this.is(':visible') ? 'inline-block' : 'none')).attr('name', "value[" + gQuestionIndex + "][]").attr('value', $this.val()).attr('class', $this.attr('class')).attr('id', $this.attr('id') + 'Row');
    $newBtn.appendTo($cell);
    i++;
});
var $this = $(this);
var $BtnsClass = '';
$row = $("<tr/>").appendTo($answer);
$cell = $("<td/>").appendTo($row);
if ($questionType == 'True or False' || $questionType == 'Yes or No') {
    $BtnsClass = $("<input class='allBtnsRow btnsAll' type='button' style='display: none;' value='Select All Answers' onClick='selectAll(this);' /><input class='allRemoveBtnsRow btnsRemove' type='button' style='display: none;' value='Remove All Answers' onClick='removeAll(this);' />");
} else {
    $BtnsClass = $("<input class='allBtnsRow btnsAll' type='button' value='Select All Answers' onClick='selectAll(this);' /><br/><input class='allRemoveBtnsRow btnsRemove' type='button' value='Remove All Answers' onClick='removeAll(this);' />");
}
$BtnsClass.appendTo($cell);
$tr.append($td);
$td.append($answer);
$tbody.append($tr);

以下是extratd和answer：

的CSS

.extratd{
    border:1px black solid;
    border-collapse:collapse;
    vertical-align:top; 
    padding-top:1em;
    padding-bottom:1em;
    padding-left:0;
    padding-right:0;

}

.answer{
    width:100%;
    text-align:center;
}

更新

好的，我发现导致此问题的代码是：

  //THE ISSUE IS HERE

var _x = $(e.currentTarget);
var _y = _x.closest('td.extratd');
var _z = _y.prev();

$('textarea', _z).css('height', '').height(_z.innerHeight());

//ISSUE ABOVE

现在上面的代码是允许Question列中的textarea填充整个表格单元格，如果附加了textarea或者选项发生了变化。所以我需要上面的代码，但上面的代码也会在表格行的底部创建一个不必要的空间，所以我需要帮助来整理不需要的空间。

我在这里有一个jsfiddle，你可以用来看看发生了什么，它还包括上面的代码：http://jsfiddle.net/aND4g/61/

请按照以下步骤使用小提琴：

当您打开小提琴时，在问题文本区域中的内容中键入顶部，然后单击Open Grid并选择按钮3或4。
< / LI>
完成第1步后，点击Add Question按钮将上述详细信息附加到下表中
现在在附近的行中，点击Open Grid，然后从您最初选择的内容中选择其他选项。您将看到它在表格行的底部创建了一个不需要的空间

Answer 1

这可能与你的填充底部值1em有关吗？也许尝试调整或删除它，它可能会解决它。一个jsFiddle肯定有助于描绘问题。

不断在表格底部添加空间

1 个答案: