如何通过点击“添加”按钮

-1

当您打开应用程序，您可以请点击“添加问题”两次，它增加了2个表行的内容添加到正确的文本区域。如何通过点击“添加”按钮

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

现在我的问题是，我想这2点的结果发生，但我确实需要从别人谁是善于为了使用jQuery/Javascript来解决这种情况的帮助：如果用户点击

格局1，加号按钮在水平线上方，然后显示一个包含搜索栏的模式窗口，请在搜索栏中输入“AAA”。您现在将看到结果列表。现在我想的是，如果用户通过点击“添加”按钮，选择一排，然后我希望“QuestionContnet”该行内显示在水平线之上的文本区域。目前，“添加”按钮只是关闭模式窗口，但不会在textarea中添加任何内容。

情况2：此处理与表中的行下方的水平行的一个内上的加号按钮的用户点击。我希望同样的事情，除了添加的，没有别的地方在同一行的用户点击加号按钮中显示的文本区域的“QuestionContent”发生。

如何这两种情况下得到解决，以便它添加到QuestionContent取决于哪个加号按钮被点击正确的文字区域？我正在使用Iframe在模态窗口中显示内容。

UPDATE：

如果你看一下应用程序，它现在将显示“[对象] [对象]”在textaea当我点击“添加”按钮。不是“问题”。

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

来源

2012-05-26 user1394925

最好不要让用户访问第三方网站。相反，请使用非常简单的示例和简短的代码摘录，在此简单介绍上下文，代码和预期结果。 –

这不是问题。你只是要求我们为你做这项工作。 – Matthew

那么你得到50分，所以这将是值得的，如果有人这样做 – user1394925

我认为最好的方式来针对选上的问题指定textarea的是参数化的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(){});中使用它 - 当用户点击'add '按钮，你有你的加号按钮，所以你可以用jQuery导航到相应的textarea并在那里放置文本。

来源

2012-05-31 21:29:27 Wirone

你能告诉我你的add函数是什么样子，因为我不能似乎得到它的工作。 – user1394925

例如，您可以省略id的加号按钮并将jQuery实例作为参数传递给'plusbutton（）'，然后使用它在DOM中导航以获取textarea。你可以看到你的应用程序的缩小版本[在这里]（http：// http：//jsfiddle.net/Wirone/skzwm/）。正如你所看到的我使用'live（）'jQuery方法，我建议你也这样做。它就像'bind（）'，但是向前发展，将来会动态创建元素。 – Wirone

我会看看，并得到结果:)顺便说一句，链接不工作你的jsfiddle – user1394925

的第一个问题是这样的 - >

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

够简单了吧？这应该解决你的第一个问题。 注：文字区域使用value设置数据，而其他元素将使用的.text（）

情况2

好了，现在我们需要弄清楚如何将一个唯一的标识符添加到点击“+”行，并在追加数据时检查该“唯一标识符”，让我们来做。

你有一个<td>与一类plusrow，听起来不错，让我们做一个点击功能，并给它一个很酷的新的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并改变了它的价值，theQuestion from the .add button we clicked.

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

来源

2012-05-26 03:54:19 Ohgodwhy

嗨，首先感谢您花时间帮助我解决这个问题。不幸的是，你所拥有的解决方案并不完善。当我点击“添加”按钮时，它不会关闭模式窗口，并根本不会向textarea添加问题。我究竟做错了什么？我更新了我的问题中的代码并更新了应用程序url。 – user1394925

@Jahnold我试过你的代码，但点击添加按钮后它仍然没有做任何事情。当我单击添加按钮时，它不会关闭模式窗口，也不会将问题添加到文本区域中。我更新了代码和网址 – user1394925

我已经把上面的代码放在QandA2Table.php中，这是正确的页面还是假设去上一个问题.php页面？ – user1394925

我在考虑下（）是不正确的功能，因为它只搜索紧随其后的兄弟...试试这个：

$(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-31 16:12:20

我试过你的代码，但没有任何事情发生。我希望你知道我使用的是iframe，所以问题可能是将数据从模态窗口（previousquestions.php）传输到textarea（QandATable2.php） – user1394925

如何通过点击“添加”按钮

回答

相关问题