如何通过单击“添加”按钮将内容添加到正确的文本区域中
[英]How to add a content into the correct textarea by clicking on an “Add” button
问题描述
当您打开应用程序时，请单击两次“添加问题”，以便添加2个表行。
现在，您将在应用程序中看到，水平线上方有一个textarea和加号按钮，水平线下方有2个表行，这两行均显示自己的textarea和加号按钮。
现在我的问题是我希望这两种结果都能发生，但是我确实需要一些精通使用Jquery / Javascript的人的帮助来解决这种情况：
情况1.如果用户单击水平线上方的加号按钮，则它将显示一个模态窗口，其中包含一个搜索栏，请输入搜索栏“ AAA”。 现在，您将看到结果列表。 现在我想要的是，如果用户通过单击“添加”按钮选择一行，那么我希望该行内的“ QuestionContnet”显示在水平线上方的文本区域中。 目前，“添加”按钮仅关闭模式窗口，但不向文本区域添加任何内容。
情况2：这涉及用户单击水平线以下表格行之一内的加号按钮。 除了在用户单击加号按钮的同一行中的文本区域中显示添加的“ QuestionContent”之外，我还希望发生同样的事情。
如何解决这两种情况，以便根据单击哪个加号按钮将QuestionContent添加到正确的文本区域中？ 我正在使用iframe在模式窗口中显示内容。
更新：
如果您查看该应用程序，当我单击“添加”按钮时，它现在在文本中显示“ [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;
?>
谢谢
在这里申请
3 个解决方案
解决方案1
3 2012-05-26 03:54:19
第一个问题是这个->
<button id="add">
您不能一遍又一遍地重复使用ID，否则页面将迭代到具有该ID的最后一个元素，并且永远不会对任何先前的元素运行任何操作。
快速解决：
<button class="add">
很简单。
我们需要从第一列中获取问题文本，使用jQuery选择器的方法太多了，这实在令人震惊。
情况1
让我们来看看一个选项->
$(document).on('click', '.add', function(){
//now that we've declared the click function, let's jump up to our parent element, and grab the text in the first cell.
var theQuestion = $("td:first-child", $(this).parent()).text();
//Now that we've figured out how to traverse the DOM to get the data we want, we need to move that data elsewhere.
$('.questionTextArea').val(firstCell);
});
很简单吧？ 那应该可以解决您遇到的第一个问题。 注意：Textareas使用value来设置数据，而其他元素将使用.text（）
情况二
好了，现在我们需要弄清楚如何在单击时向“ +”行添加唯一标识符，并在添加数据时检查该“唯一标识符”，让我们开始吧。
您有一个带有trow类的<td> ，听起来不错，让我们从中创建click函数，然后给它一个很酷的新class供参考。
$(document).on('click', '.plusrow', function(){
//adding a unique class for the purpose of the click.
$(this).addClass('activePlusRow');
});
因此，现在我们单击的“ +”有了一个新类activePlusRow ，让我们回到添加按钮的初始单击处理程序，并为其提供一些新的条件语句。
$(document).on('click', '.add', function(){
//lets get our Question Text...
var theQuestion = $("td:first-child", $(this).parent()).text();
//the row is present, let's then make sure that the proper cell gets your data.
if($('.activePlusRow').length > 0){
$('.activePlusRow').next('.textAreaQuestion').val(theQuestion);
$('.activePlusRow').removeClass('activePlusRow');
}
});
好了，正如您在上面看到的，我们测试看看是否存在activePlusRow类，如果存在，那么我们使用textAreaQuestion类迭代到下一个textarea with a class of textAreaQuestion并将其值更改theQuestion from the .add button we clicked.
如果您有任何疑问，请告诉我。
解决方案2
2 已采纳 2012-05-31 21:29:27
我认为将所选问题定位到指定文本区域的最佳方法是参数化您的plusbutton函数：
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;
}
当然，您必须声明全局var plusbutton_clicked; 在insertQuestion函数之前，因此其他函数可以更改/使用此信息。 您必须为每个加号按钮调用具有唯一参数的此函数（您可以动态生成它，因此这取决于您的操作方式）
然后，您可以简单地在$(document).on('click', '.add', function(){}); -当用户单击“添加”按钮时，您将拥有您的plusbutton ID，以便可以使用jQuery导航到相应的textarea并将文本放置在此处。
解决方案3
0 2012-05-31 16:12:20
我在想next（）不是正确的函数，因为它仅搜索紧随其后的同级对象...尝试以下操作：
$(document).on('click', '.add', function(){
console.log("clicked");
//lets get our Question Text...
var theQuestion = $("td:first-child", $(this).parent()).text();
//the row is present, let's then make sure that the proper cell gets oru data.
if($('.activePlusRow').length > 0){
$('.activePlusRow').next('.question').find('textarea.textAreaQuestion').val(theQuestion);
$('.activePlusRow').removeClass('activePlusRow');
}
$.modal.close();
return true;
});
如何在mysql中添加textarea内容？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.