0

私が抱えている問題のレイアウトを確認できるようにするためのアプリケーションがここにあります。アプリケーションを開いたときに[質問の追加]ボタンをクリックすると、コンテンツを示す3つの列を持つテーブル行が表示されます。

最初の列は[オプション]テキストボックス、2番目は数値テキストボックス、3番目は2つのボタンを示しています。問題は、3つの列が並んで表示されていることです。

代わりに、3列ではなく、3行のテーブル行内に表示されている必要があります。

したがって、現在、テーブルの行ごとにこれが表示されています。

Option Textbox | Number Textbox | 2 Buttons

代わりに、テーブル行内に配置する必要があります。

Option Textbox

Number Textbox

2 Buttons

だから私が言ったように、私は3つの列ではなく、行内に3つの行が必要です。しかし、以下のコードでこれをどのように達成できますか？

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);
4

2 に答える 2

0

テーブルの行は開始と終了で示される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>");

それらのそれぞれがテーブルに行を作成します。

于 2012-05-28T15:45:39.300 に答える
0

セル内にテーブルを配置して3行にするか、他のセルでrowspan属性を使用して、スパンが3行になるようにしてみてください。

于 2012-05-28T18:53:08.880 に答える