在我的页面顶部,我有一个选项和答案控件,用户可以在其中从网格中选择一个选项,并且根据所选选项显示相关的答案按钮。
下面是存储选项和答案控制功能的 html 代码:
页面顶部的选项和答案控件:
<table id="optionAndAnswer" class="optionAndAnswer">
<tr class="option">
<td>1. Option Type:</td>
<td>
<div class="box">
<input type="text" name="gridValues" class="gridTxt maxRow" id="mainGridTxt" readonly="readonly" />
<span href="#" class="showGrid" id="showGridId">[Open Grid]</span>
</div>
<?php
$num = range("3","26");
?>
<table class="optionTypeTbl">
<tr>
<?php
$i = 1;
foreach($num as $key => $val){
if($i%7 == 1) echo"<tr><td>";
echo"<input type=\"button\" value=\"$val\" id=\"btn".$val."\" name=\"btn".$val."Name\" class=\"gridBtns gridBtnsOff\">";
if($i%7 == 0) echo"</td></tr>";
$i++;
}
?>
</tr>
</table>
</td>
</tr>
<tr class="answer">
<td>3. Answer</td>
<td>
<?php
$a = range("A","Z");
?>
<table id="answerSection">
<tr>
<?php
$i = 1;
foreach($a as $key => $val){
if($i%7 == 1) echo"<tr><td>";
echo"<input type=\"button\" onclick=\"btnclick(this);\" value=\"$val\" id=\"answer".$val."\" name=\"answer".$val."Name\" class=\"answerBtns answers answerBtnsOff\">";
if($i%7 == 0) echo"</td></tr>";
$i++;
}
?>
</tr>
</table>
</td>
</tr>
</table>
单击添加按钮后显示正确数量的答案按钮的代码行是以下代码:
$('#btn'+gridValues).trigger('click');
现在我没有包含这段代码,但用户可以单击“添加”按钮将选项类型添加到选项类型文本框中。当一个选项类型被插入到文本框中时,它会自动在网格中选择选项值匹配的选项按钮,因此,上面的触发代码能够通过查看选项类型来显示正确数量的答案按钮从网格中选择。
我遇到的问题是,这只适用于页面顶部的选项和答案控件。用户可以在应用程序中添加行,并在每一行中添加自己的选项和答案控制。一行内追加和回答和选项控制的代码如下:
function insertQuestion(form) {
var $tbody = $('#qandatbl > tbody');
var $tr = $("<tr class='optionAndAnswer' align='center'>");
var $options = $("<div class='option'>Option Type:<br/></div>");
var $answer = $("<div class='answer'>Answer:<br/></div>");
$('.gridTxt', context).each( function() {
var $this = $(this);
var $optionsText = $("<input type='text' class='gridTxtRow maxRow' readonly='readonly' />")
.attr('name',$this.attr('name')+"[]")
.attr('value',$this.val())
.appendTo( $options )
.after("<span href='#' class='showGrid'>[Open Grid]</span>");
$questionType = $this.val();
});
var $this, i=0, $row, $cell;
$('#optionAndAnswer .answers').each(function() {
$this = $(this);
if(i%7 == 0) {
$row = $("<tr/>").appendTo($answer);
$cell = $("<td/>").appendTo($row);
}
var $newBtn = $("<input class='answerBtnsRow answers' type='button' style='display:%s;' onclick='btnclick(this);' />".replace('%s',$this.is(':visible')?'inline-block':'none')).attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class'));
$newBtn.appendTo($cell);
i++;
});
$td.append($options);
$td.append($answer);
$tbody.append($tr);
}
所以我的问题是,如果此触发器:$('#btn'+gridValues).trigger('click');
仅适用于顶部的主选项和答案控件,我如何包含此触发器以便能够在特定行中的答案和选项控件中显示正确数量的答案按钮?
我有能够找到该行的起始代码,只需要有关如何在此代码末尾包含触发器的帮助,因为#btn
行中的选项和答案控件中没有:
$(plusbutton_clicked).closest('tr').....;