-1

当您打开应用程序时，您可以单击“添加问题”两次，以便添加 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;

        ?>

谢谢

在这里申请

4

3 回答 3

3

第一个问题是这个->

<button id="add">

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

快速解决：

<button class="add">

很简单。

我们需要从第一列中获取问题文本，使用 jQuery 选择器有很多方法可以做到这一点，这让我们大吃一惊。

情况一

让我们看一下一个选项->

$(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>带有 plusrow 的类，听起来不错，让我们用它来做一个 click 函数，并给它一个很酷的 newclass以供参考。

 $(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并更改它的值，为theQuestion from the .add button we clicked.

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

于 2012-05-26T03:54:19.140 回答
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 导航到相应的文本区域并将文本放在那里。

于 2012-05-31T21:29:27.980 回答
0

我在想 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;

});
于 2012-05-31T16:12:20.197 回答