单击“单击以回答”按钮后如何在同一行中生成答案

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 函数显示一个简单的输入框并获取答案并将其附加到问题所在的单元格中。

不漂亮也不复杂，但它可以完成工作。您可以通过很多不同的方式对其进行改进。