当您打开应用程序时,您可以单击“添加问题”两次,以便添加 2 个表格行。
现在您将在应用程序中看到,在水平线上方有一个 textarea 和一个加号按钮,在水平线下方显示 2 个表格行,两行都显示自己的 textarea 和加号按钮。
现在我的问题是我希望这两种结果发生,但我确实需要擅长使用 Jquery/Javascript 的人的帮助来解决这种情况:
情况 1. 如果用户单击水平线上方的加号按钮,则会显示一个包含搜索栏的模式窗口,请在搜索栏中输入“AAA”。您现在将看到结果列表。现在我想要的是,如果用户通过单击“添加”按钮选择一行,那么我希望该行中的“QuestionContnet”显示在水平线上方的文本区域中。目前,添加按钮只是关闭模式窗口,但不向文本区域添加任何内容。
情况2:这涉及用户单击水平线下方的表格行之一内的加号按钮。我希望发生同样的事情,除了添加的“QuestionContent”显示在用户单击加号按钮的同一行内的文本区域中,没有其他地方。
如何解决这两种情况,以便根据单击哪个加号按钮将 QuestionContent 添加到正确的文本区域中?我正在使用 Iframe 在模态窗口中显示内容。
更新:
如果您查看应用程序,当我单击“添加”按钮时,它现在在 textaea 中显示“[Object] [object]”。不是“问题”。
Below is the code for the application:
<head>
<script type="text/javascript">
var plusbutton_clicked;
function insertQuestion(form) {
var $tbody = $('#qandatbl > tbody');
var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
var $plusrow = $("<td class='plusrow'></td>");
var $question = $("<td class='question'></td>");
$('.questionTextArea').each( function() {
var $this = $(this);
var $questionText = $("<textarea class='textAreaQuestion'></textarea>").attr('name',$this.attr('name')+"[]")
.attr('value',$this.val());
$question.append($questionText);
});
$('.plusimage').each( function() {
var $this = $(this);
var $plusimagerow = $("<a onclick='return plusbutton();'><img src='Images/plussign.jpg' width='30' height='30' alt='Look Up Previous Question' class='imageplus'/></a>").attr('name',$this.attr('name')+"[]")
.attr('value',$this.val());
$plusrow.append($plusimagerow);
});
$tr.append($plusrow);
$tr.append($question);
$tbody.append($tr);
form.questionText.value = "";
$('.questionTextArea').val('');
}
function plusbutton() {
// Display an external page using an iframe
var src = "previousquestions.php";
$.modal('<iframe src="' + src + '" style="border:0;width:100%;height:100%;">');
return false;
}
function closewindow() {
$.modal.close();
return false;
}
$('.plusimage').live('click', function() {
plusbutton($(this));
});
function plusbutton(plus_id) {
// Set global info
plusbutton_clicked = plus_id;
// Display an external page using an iframe
var src = "previousquestions.php";
$.modal('<iframe src="' + src + '" style="border:0;width:100%;height:100%;">');
return false;
}
function addwindow(questionText) {
if(window.console) console.log();
var txt = $(this).val(questionText);
if($(plusbutton_clicked).attr('id')=='mainPlusbutton') {
$('#mainTextarea').val(txt);
} else {
$(plusbutton_clicked).parent('td').next('td.question').find('textarea.textAreaQuestion').val(txt);
}
$.modal.close();
return false;
}
</script>
</head>
<body>
<form id="QandA" action="<?php echo htmlentities($action); ?>" method="post">
<div id="detailsBlock">
<table id="question">
<tr>
<td rowspan="3">Question:</td>
<td rowspan="3">
<textarea class="questionTextArea" id="mainTextarea" rows="5" cols="40" name="questionText"></textarea>
</td>
</tr>
</table>
<table id="plus" align="center">
<tr>
<th>
<a onclick="return plusbutton();">
<img src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage" id="mainPlusbutton" name="plusbuttonrow"/>
</a>
<span id="plussignmsg">(Click Plus Sign to look <br/> up Previous Questions)</span>
</th>
</tr>
</table>
<table id="questionBtn" align="center">
<tr>
<th>
<input id="addQuestionBtn" name="addQuestion" type="button" value="Add Question" onClick="insertQuestion(this.form)" />
</th>
</tr>
</table>
</div>
<hr/>
<div id="details">
<table id="qandatbl" align="center">
<thead>
<tr>
<th class="plusrow"></th>
<th class="question">Question</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</form>
</body>
存储在模态窗口中的详细信息来自一个名为“previousquestions.php”的单独脚本,下面是代码,其中显示了“QuestionContent”字段的结果仅显示,它是用户编译搜索后的“添加”按钮:
<?php
$output = "";
while ($questionrow = mysql_fetch_assoc($questionresult)) {
$output .= "
<table>
<tr>
<td class='addtd'><button type='button' class='add' onclick='parent.addwindow();'>Add</button></td>
</tr>";
}
$output .= " </table>";
echo $output;
?>
谢谢
在这里申请