如何通过单击“添加”按钮将内容添加到正确的文本区域中

Question

When you open the application can you please click on the "Add Question" twice so it adds 2 table rows. 当您打开应用程序时，请单击两次“添加问题”，以便添加2个表行。

Now you will see in the application that above the horizontal line there is a textarea and a plus button, and below the horizontal line shows 2 table rows, both rows displaying its own textarea and plus button. 现在，您将在应用程序中看到，水平线上方有一个textarea和加号按钮，水平线下方有2个表行，这两行均显示自己的textarea和加号按钮。

Now my question is that I want these 2 outcomes to happen but I do need help from somebody who is good at using Jquery/Javascript in order to solve this situation: 现在我的问题是我希望这两种结果都能发生，但是我确实需要一些精通使用Jquery / Javascript的人的帮助来解决这种情况：

Situation 1. If the user clicks on the plus button ABOVE the horizontal line, then it displays a modal window which contains a search bar, Please type in search bar "AAA". 情况1.如果用户单击水平线上方的加号按钮，则它将显示一个模态窗口，其中包含一个搜索栏，请输入搜索栏“ AAA”。 You will now see a list of results. 现在，您将看到结果列表。 Now what I want is that if the user selects a row by clicking on the "Add" button, then I want the "QuestionContnet" within that row to be displayed in the textarea above the horizontal line. 现在我想要的是，如果用户通过单击“添加”按钮选择一行，那么我希望该行内的“ QuestionContnet”显示在水平线上方的文本区域中。 At the moment the Add button just closes the modal window but doesn't add anything into the textarea. 目前，“添加”按钮仅关闭模式窗口，但不向文本区域添加任何内容。

Situation 2: This deals with the user clicking on a plus button within one of the table rows BELOW the horizontal line. 情况2：这涉及用户单击水平线以下表格行之一内的加号按钮。 I want the same thing to happen except the "QuestionContent" added is displayed in the textarea within the same row the user has clicked the plus button, no where else. 除了在用户单击加号按钮的同一行中的文本区域中显示添加的“ QuestionContent”之外，我还希望发生同样的事情。

How can both situations be solved so that it adds the QuestionContent into the correct textareas depending on which plus button is clicked? 如何解决这两种情况，以便根据单击哪个加号按钮将QuestionContent添加到正确的文本区域中？ I am using an Iframe to display the content within the modal window. 我正在使用iframe在模式窗口中显示内容。

UPDATE: 更新：

If you look at the application, it is now displaying "[Object] [object]" in textaea when I click "Add" button. 如果您查看该应用程序，当我单击“添加”按钮时，它现在在文本中显示“ [Object] [object]”。 Not the "Question". 不是“问题”。

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>

The details stored in the modal window comes from a seperate script known as "previousquestions.php", Below is the code where it shows the result of the "QuestionContent" field only displayed and it's "Add" button after the user has compiled a search: 模态窗口中存储的详细信息来自一个单独的脚本，称为“ 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;

        ?>

Thank you 谢谢

Application here 在这里申请

Answer 1

The first issue is this -> 第一个问题是这个->

<button id="add">

You cannot reuse an ID over and over, or, the page will iterate to the last element with that ID and NEVER run anything on any previous elements. 您不能一遍又一遍地重复使用ID，否则页面将迭代到具有该ID的最后一个元素，并且永远不会对任何先前的元素运行任何操作。

Quick fix: 快速解决：

<button class="add">

Simple enough. 很简单。

We need to get the question text, from the first column, there are so many methods to do this with jQuery selectors it's mind blowing. 我们需要从第一列中获取问题文本，使用jQuery选择器的方法太多了，这实在令人震惊。

Situation 1 情况1

Let's take a peek at one option -> 让我们来看看一个选项->

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

Simple enough, right? 很简单吧？ That should solve the first problem you had. 那应该可以解决您遇到的第一个问题。 Note: Textareas use value to set the data, whereas other elements will use .text() 注意：Textareas使用value来设置数据，而其他元素将使用.text（）

Situation 2 情况二

Alright, now we need to figure out how to add a unique identifier to the "+" row when we click, and check for that "unique identifier" when appending the data, let's do it. 好了，现在我们需要弄清楚如何在单击时向“ +”行添加唯一标识符，并在添加数据时检查该“唯一标识符”，让我们开始吧。

You have a <td> with a class of plusrow, sounds good, let's make a click function out of it, and give it a cool new class to reference. 您有一个带有trow类的<td> ，听起来不错，让我们从中创建click函数，然后给它一个很酷的新class供参考。

 $(document).on('click', '.plusrow', function(){
   //adding a unique class for the purpose of the click.
   $(this).addClass('activePlusRow');
 });

So now the "+" we clicked has a new class -- activePlusRow , let's go back to our initial click handler for the add button, and give it some new conditional statements. 因此，现在我们单击的“ +”有了一个新类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');
  }
});

Alright, as you can see of the above, we test to see if the activePlusRow class exists, if it does, then we iterate to the next textarea with a class of textAreaQuestion and change the value of it, to theQuestion from the .add button we clicked. 好了，正如您在上面看到的，我们测试看看是否存在activePlusRow类，如果存在，那么我们使用textAreaQuestion类迭代到下一个textarea with a class of textAreaQuestion并将其值更改theQuestion from the .add button we clicked.

Let me know if you've any questions. 如果您有任何疑问，请告诉我。

Answer 2

I think best way to target chosen question to specified textarea is to parameterise your plusbutton function: 我认为将所选问题定位到指定文本区域的最佳方法是参数化您的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;
}

Of course you have to declare global var plusbutton_clicked; 当然，您必须声明全局var plusbutton_clicked; before insertQuestion function so other functions could change/use this information. 在insertQuestion函数之前，因此其他函数可以更改/使用此信息。 You have to call this function with unique parameter for each plusbutton (you generate it dynamically, so this is up to you how you want to do it) 您必须为每个加号按钮调用具有唯一参数的此函数（您可以动态生成它，因此这取决于您的操作方式）

Then you can simply use it in your $(document).on('click', '.add', function(){}); 然后，您可以简单地在$(document).on('click', '.add', function(){}); - when user clicks 'add' button you have your plusbutton id so you can navigate with jQuery to corresponding textarea and place text there. -当用户单击“添加”按钮时，您将拥有您的plusbutton ID，以便可以使用jQuery导航到相应的textarea并将文本放置在此处。

Answer 3

I'm thinking next() isn't the right function, since it only searches for the immediately following sibling... Try this: 我在想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;

});

如何通过单击“添加”按钮将内容添加到正确的文本区域中

问题描述

3 个解决方案

解决方案1
3 2012-05-26 03:54:19

解决方案2
2 已采纳 2012-05-31 21:29:27

解决方案3
0 2012-05-31 16:12:20

如何通过单击“添加”按钮将内容添加到正确的文本区域中

问题描述

3 个解决方案

解决方案1 3 2012-05-26 03:54:19

解决方案2 2 已采纳 2012-05-31 21:29:27

解决方案3 0 2012-05-31 16:12:20

解决方案1
3 2012-05-26 03:54:19

解决方案2
2 已采纳 2012-05-31 21:29:27

解决方案3
0 2012-05-31 16:12:20