javascript - 单击 'Click to answer' 按钮后如何在同一行中生成答案

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

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