Question

当您打开应用程序时，请点击“添加问题”两次，这样就可以添加2个表格行。

现在您将在应用程序中看到水平线上方有一个textarea和一个加号按钮，水平线下方显示两个表行，两行显示自己的textarea和加号按钮。

现在我的问题是我希望这两个结果发生但我需要擅长使用Jquery / Javascript来解决这种情况的人的帮助：

情况1.如果用户点击水平线上方的加号按钮，则会显示一个包含搜索栏的模态窗口，请在搜索栏中输入“AAA”。您现在将看到结果列表。现在我想要的是，如果用户通过单击“添加”按钮选择一行，那么我希望该行中的“QuestionContnet”显示在水平线上方的textarea中。目前，“添加”按钮仅关闭模态窗口，但不会在textarea中添加任何内容。

情况2：这涉及用户点击水平线以下的一个表行中的加号按钮。我想要发生同样的事情，除了添加的“QuestionContent”显示在用户单击加号按钮的同一行内的textarea中，没有其他地方。

如何解决这两种情况，以便根据点击的加号按钮将QuestionContent添加到正确的textareas中？我正在使用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;

        ?>

谢谢

申请here

Answer 1

第一个问题是这个 - ＆gt;

<button id="add">

您不能反复重复使用ID，或者页面将迭代到具有该ID的最后一个元素，并且永远不会在任何先前元素上运行任何内容。

快速修复：

<button class="add">

足够简单。

我们需要得到问题文本，从第一列开始，有很多方法可以用jQuery选择器来实现这个目标。

情况1

让我们一看一个选项 - ＆gt;

$(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（）

情况2

好的，现在我们需要弄清楚如何在点击时向“+”行添加唯一标识符，并在附加数据时检查该“唯一标识符”，让我们这样做。

你有<td>类加上一行，听起来不错，让我们点击它来制作一个点击功能，然后给它一个很酷的新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类是否存在，如果存在，则我们迭代到下一个textarea with a class of textAreaQuestion并将其值更改为{{1} }

如果您有任何问题，请告诉我。

Answer 2

我认为将所选问题定位到指定文本区域的最佳方法是参数化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并在那里放置文本。

Answer 3

我认为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 个答案: