0

我已经阅读了有关 stackoverflow 的许多类似问题，但对于如何根据我的特定情况进行修改有点迷茫。我想根据选择的单选按钮以不同的方式在 html 中输出 2 行。我还在学习javascript...

请问我错过了什么？以及如何在单选按钮表单项之后直接输出 html？

我的表格是这样的；

<tr>
  <td>Select your option</td>
  <td><input type="radio" name="your_store" id="store_yes" value="1" onclick = "addrow()" />
  <?php echo $text_yes; ?>
  <input type="radio" name="your_store" id="store_no" value="0" onclick = "addrow()" />
  <?php echo $text_no; ?></td>
</tr>

在此之后，我还有其他几个表单项

在表格的底部，我有这个功能；

<script type="text/javascript"><!-- 
function addrow() {   
  if(document.getElementById('store_yes').checked) {
    html  = '<tr>'; 
    html  = '<td>Row is showing this</td> '; 
    html  = '</tr>'; 
  } else {
    html  = '<tr>';
    html  = '<td>Row is showing something else</td> '; 
    html  = '</tr>'; 
  }
//--></script>

编辑，如果选择 YES，则出现 2 行，如果随后选择 NO，则行需要再次消失，即改变用户的想法。

4

1 回答 1

1

这是您的代码，我使用 Jquery 将行附加到表的末尾。在此处阅读有关 jquery 中 .append() 的更多信息。

修改后的功能：

function addrow() {
    if (document.getElementById('store_yes').checked) {
        $('#yourTable').append('<tr><td>Row is showing this</td></tr>');
    } else {
        $('#yourTable').append('<tr><td>Row is showing something else</td></tr>');
    }
}

修改后的 HTML

`

<table border="1" id="yourTable"><tr>
  <td>Select your option</td>
  <td><input type="radio" name="your_store" id="store_yes" value="1" onclick = "addrow()" />
    <input type="radio" name="your_store" id="store_no" value="0" onclick = "addrow()" />
  </td>
</tr>
</table>

`

在这里查看演示

更新
演示已更新，如果用户改变主意，将删除附加的行

于 2012-11-02T01:31:47.177 回答