它顯示<tbody>每行

我有我的表jquery解析的問題。我相信我此刻的分析是這樣的：它顯示<tbody>每行

<table id="qandatbl"> 
<thead> 
<tr> 
    <th class="qid">Question No</th> 
    <th class="question">Question</th> 
    <th class="option">Option Type</th> 
    <th class="noofanswers">Number of Answers</th> 
    <th class="answer">Answer</th> 
    <th class="noofreplies">Number of Replies</th> 
    <th class="weight">Number of Marks</th> 
    <th class="image">Image</th> 
    <th class="video">Video</th> 
    <th class="audio">Audio</th> 
</tr> 
</thead> 
<tbody> 
<tr></tr> 
</tbody> 
<tbody> 
<tr></tr> 
</tbody> 
<tbody> 
<tr></tr> 
</tbody> 
</table>

它創建於各行的<tbody>。相反，它應顯示一個<tbody>並在<tbody>中顯示所有<tr>。我想要它像下面這樣：

<table id="qandatbl"> 
<thead> 
<tr> 
    <th class="qid">Question No</th> 
    <th class="question">Question</th> 
    <th class="option">Option Type</th> 
    <th class="noofanswers">Number of Answers</th> 
    <th class="answer">Answer</th> 
    <th class="noofreplies">Number of Replies</th> 
    <th class="weight">Number of Marks</th> 
    <th class="image">Image</th> 
    <th class="video">Video</th> 
    <th class="audio">Audio</th> 
</tr> 
</thead> 
<tbody> 
<tr></tr> 
<tr></tr> 
<tr></tr> 
</tbody> 
</table>

我怎樣才能達到上述目的？

下面是控制<tbody>和<tr>的jquery代碼。

function insertQuestion(form) { 

     var $tbody = $("<tbody class='tbody'></tbody>"); 
     var $tr = $("<tr class='optionAndAnswer'></tr>"); 
     var $qid = $("<td class='qid'>" + qnum + "</td>"); 
     var $question = $("<td class='question'></td>"); 
     var $noofanswers = $("<td class='noofanswers'></td>"); 
     var $options = $("<td class='option'></td>"); 
     var $answer = $("<table class='answer'></table>"); 
     var $replies = $("<td class='noofreplies'><div class='wrapper'></div></td>"); 
     var $weight = $("<td class='weight'></td>"); 
     var $image = $("<td class='image'></td>"); 
     var $video = $("<td class='video'></td>"); 
     var $audio = $("<td class='audio'></td>"); 

    $('.gridTxt', context).each(function() { 

    var $this = $(this); 
    var $optionsText = $("<input type='text' class='gridTxtRow maxRow' readonly='readonly' /><span href='#' class='showGrid'>[Open Grid]</span>").attr('name',$this.attr('name')) 
        .attr('value',$this.val()) 

    $options.append($optionsText); 
    $questionType = $this.val(); 

    }); 

    $('.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); 

     }); 


    $('#questionTextArea').each(function() { 

    var $this = $(this); 
    var $questionText = $("<textarea onload='resizeTxt'></textarea>").attr('name',$this.attr('name')) 
        .attr('value',$this.val()) 

    $question.append($questionText); 



     $tbody.append($tr); 
     $tr.append($qid); 
     $tr.append($question); 
     $tr.append($options); 
     $tr.append($noofanswers); 
     $tr.append($answer); 
     $tr.append($replies); 
     $tr.append($weight); 
     $tr.append($image); 
     $tr.append($video); 
     $tr.append($audio);  
     $('#qandatbl').append($tbody); 

    }

下面是HTML中挑選出<thead>並且其中的jQuery <tbody>和<tr>將進入表：

<table id="qandatbl" align="center"> 
<thead> 
<tr> 
    <th class="qid">Question No</th> 
    <th class="question">Question</th> 
    <th class="option">Option Type</th> 
    <th class="noofanswers">Number of Answers</th> 
    <th class="answer">Answer</th> 
    <th class="noofreplies">Number of Replies</th> 
    <th class="weight">Number of Marks</th> 
    <th class="image">Image</th> 
    <th class="video">Video</th> 
    <th class="audio">Audio</th> 
</tr> 
</thead> 
</table>

來源

2012-01-22 user1163005

你的代碼適合我。只有我看到的錯誤是我假設'var $ answer = $（「

」）;'應該是'var $ answer = $（「」） ;'http://jsfiddle.net/kmnVk/ – 2012-01-22 01:37:31

除非你多次調用'insertQuestion' ......在這種情況下，當然你會有幾個''元素，因爲每個調用都會創建並附加一個新元素。 – 2012-01-22 01:39:58

var $ answer實際上是唯一一個表，其他人是td，這是有原因的。我將更新我的代碼，其中包含一些.each函數，看看它是否仍然正確 – user1163005

你可以只添加<tbody>到HTML：

<table id="qandatbl" align="center"> 
    <thead> 
    <tr> 
     <th class="qid">Question No</th> 
     <th class="question">Question</th> 
     <th class="option">Option Type</th> 
     <th class="noofanswers">Number of Answers</th> 
     <th class="answer">Answer</th> 
     <th class="noofreplies">Number of Replies</th> 
     <th class="weight">Number of Marks</th> 
     <th class="image">Image</th> 
     <th class="video">Video</th> 
     <th class="audio">Audio</th> 
    </tr> 
    </thead> 
    <tbody class="tbody"></tbody> 
</table>

然後使用這個：

function insertQuestion(form) { 

var $tbody = $('#qandatbl tbody'); 

//rest of your function

http://jsfiddle.net/QGBw3/1/

來源

2012-01-22 01:44:47

它顯示<tbody>每行

回答

相關問題