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

时间:2014-01-14 17:34:42

标签: javascript jquery html-table

我不熟悉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>

1 个答案:

答案 0 :(得分:0)

如果您使用纯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函数显示一个简单的输入框并接受答案并将其附加到带有问题的单元格。

不漂亮或复杂,但它完成了工作。你可以用很多不同的方式改进它。