如何在點擊「點擊回答」按鈕之後在同一行中生成答案

Question

我不熟悉javascript，jquery等。我需要幫助以瞭解如何在點擊按鈕之後，彈出提交的地方我可以爲特定問題輸入答案，然後在該問題下顯示（在同一行中）。您還可以檢查這裏http://jsfiddle.net/bobouch/thbnZ/1/

.table { 
width: 99%; 
color:#333333; 
background-color: #E0E0E0; 
border-width: 1px; 
border-color: #999999; 
border-radius: 3px 3px 3px 3px; 
margin: auto; 
margin-top: 20px; 
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    } 

table , th { 
background-color: #F08200; 
padding: 8px; 
border: 0px solid; 
border-color: #E0E0E0; 
color:#ffffff; 
} 

table th:first-child { 
width: 10%; 
} 
table th:nth-child(2) { 
width: 80%; 
} 
table th:last-child { 
width: 100px; 
} 

table, tr { 
background-color:#FFFFFF; 
} 

table tr:hover { 
background-color: #D4D4D4; 
} 

table, td { 
text-align: center; 
border: 0px solid; 
padding: 5px; 
border-style: solid; 
border-color: #E0E0E0; 

} 

// HTML

<table class='table'><th>Id</th><th>Question</th><th>Date</th><th>Answer</th> 

<tr> 
<td> 
1 
</td> 
<td> 
Some question here1 
</td> 
<td> 
Date 
</td> 
<td> 
<button onclick='myFunction()'>Click to answer</button> 
</td> 
</tr> 
<tr> 
<td> 
2 
</td> 
<td> 
Some question here2 
</td> 
<td> 
Date 
</td> 
<td> 
<button onclick='myFunction()'>Click to answer</button> 
</td> 
</tr> 
<tr> 
<td> 
3 
</td> 
<td> 
Some question here3 
</td> 
<td> 
Date 
</td> 
<td> 
<button onclick='myFunction()'>Click to answer</button> 
</td> 
</tr> 
</table> 

Answer 1

如果您使用純JavaScript可以使用一些功能參數，你想什麼。

事情是這樣的：

HTML

<h3 align="center">After hiting the Click button, i need to pop out field where i can answer specific question? How to produce an answer in the same row under each question </h3> 
<table class='table'><th>Id</th><th>Question</th><th>Date</th><th>Answer</th> 

<tr> 
<td>1</td> 
<td id='q1'>Some question here1</td> 
<td>Date</td> 
<td><button onclick="clickMe('First Question', 'q1');" type="button">Click to answer</button></td> 
</tr> 
<tr> 
<td>2</td> 
<td id="q2">Some question here2</td> 
<td>Date</td> 
<td><button onclick="clickMe('Second Question', 'q2');" type="button">Click to answer</button></td> 
</tr> 
<tr> 
<td>3</td> 
<td id="q3">Some question here3</td> 
<td>Date</td> 
<td><button onclick="clickMe('Third Question', 'q3');" type="button">Click to answer</button></td> 
</tr> 
</table> 

的Javascript：

<script type="text/javascript"> 
function clickMe(Question, id) 
{ 
var QuestionPrompt = prompt(Question,"Type your answer here..."); 

if (QuestionPrompt!==null) 
    { 
     var curText = document.getElementById(id).innerHTML; 
     var newText = curText + "<br/>" + QuestionPrompt; 
     document.getElementById(id).innerHTML = newText; 
    } 
} 
</script> 

的onclick事件發送問題文本，你想放的答案小區的ID。 javascript函數顯示一個簡單的輸入框並將其作爲答案並將其附加到帶有問題的單元格。

不漂亮或複雜，但它完成了工作。你可以用很多不同的方式改進它。