jquery - テーブルの下部にスペースを追加し続けます

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以下はとの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/

フィドルを使用するには、以下の手順に従ってください。

フィドルを開くときは、一番上に質問のテキストエリアにコンテンツを入力し、Open Gridボタン3またはを選択します4。
手順1が完了したら、Add Questionボタンをクリックして上記の詳細を下の表に追加します
追加された行内で、をクリックし、Open Grid最初に選択したものから他のオプションを選択します。テーブル行の下部に不要なスペースが作成されることがわかります

jquery - テーブルの下部にスペースを追加し続けます

1 に答える 1

Related

Reference