Question

我希望用户能够将表格行中的问题添加到textarea中。问题所涉及的textarea取决于用户选择他们选择问题的“.plus”按钮。

E.g。如果用户单击页面顶部的加号按钮，则用户单击“添加”按钮时的问题将进入页面顶部的文本区域。

另一个例如如果用户单击第5行表中的加号按钮，则用户单击“添加”按钮时的问题将进入该行（第5行）内的文本区域。

我遇到的问题是，当用户点击“添加”按钮时，没有任何反应。假设关闭模态窗口并将问题插入正确的文本区域，但没有任何事情发生。它没有关闭模态窗口，也没有将问题插入到textarea中。

我做错了什么？

以下是该应用程序的代码：

<head>
    <script type="text/javascript">
        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;
        }
        $(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('.textAreaQuestion').val(theQuestion);
                $('.activePlusRow').removeClass('activePlusRow');
            }
            $.modal.close();
            return true;
        });
        $(document).on('click', '.plusrow', function () {
            //adding a unique class for the purpose of the click. 
            $(this).addClass('activePlusRow');
        });
    </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" 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" 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 = "";
$output .= "
    <table border='1' id='resulttbl'>
      <tr>
      <th id='questionth'>Question</th>
      </tr>
";
        while ($questionrow = mysql_fetch_assoc($questionresult)) {
$output .= "
      <tr>
      <td id='questiontd'>{$questionrow['QuestionContent']}</td>
      <td id='addtd'><button type='button' class='add'>Add</button></td>
      </tr>";
        }
        $output .= "        </table>";

        echo $output;

  }

}

?>

谢谢

Answer 1

var $questionText = $("<textarea class='textAreaQuestion'></textarea>")
                           .attr('name',$this.attr('name')+"[]")
                           .val($this.val());  // .val() for set value to textarea

下面的函数不是在textarea中添加任何东西

1 个答案: