2

我的选项和答案功能有问题。如果我选择一个包含许多按钮输出的选项，例如如果我选择选项 20，它将显示 20 个按钮，我遇到的问题是在表格列的底部，空间下降了一点。它仅在更改选项时才会这样做，然后空间始终保持不变。My question is simply how can I stop the space at the bottom of the table column to increase when an option changes?

作为问题的表列被称为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);

下面是extratdand的 CSS answer：

.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/

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

  1. 当您打开小提琴时，在问题文本区域的顶部键入内容，然后单击Open Grid并选择按钮3或4。

  2. 完成第 1 步后，单击Add Question按钮将上述详细信息附加到下表中

  3. 现在在附加的行中，单击Open Grid并从您第一次选择的选项中选择另一个选项。您会看到它在表格行的底部创建了一个不需要的空间

4

1 回答 1

0

这可能与您的 padding-bottom 值 1em 有关吗？也许尝试调整或删除它，它可能会修复它。一个 jsFiddle 肯定会帮助描绘这个问题。

于 2013-01-24T13:23:45.763 回答