java - 使用单选按钮上的 onclick 函数生成动态表

Question

Javascript函数:

<script>
function pop(){
// can table get generated here??
}
</script>

<Table>
     <tr>
          <TD>
               <input type="radio" name="test" onclick= pop()>
          </TD>
          <TD>
               ${Data.getGenId().get(i)}
          </TD>
          <TD>
          ${Data.getValue1().get(i)}
     </tr>
</Table>

上面是我的动态生成的表格。我在该表格中有一个单选按钮，一旦单击该单选按钮，我就需要在上面的表格下方创建一个新表格，其中将包含 GenId 值...

是否可以使用 javascript 中的 onclick 函数进行创建？还是其他方式？

我是一名新手，正在学习 javascript 和 JSP，任何帮助都会非常有帮助。

Answer 1

这篇文章是根据评论中的讨论进行编辑的。

作为新手，您最好的选择是使用像 JQuery 这样的库。使用 JQuery(它运行于 Sizzle 选择器引擎)，您可以轻松地将 HTML 插入页面中的任何位置。 JQuery 的开销相对较低，由 Google 托管，并且易于使用。 JQuery 的用途远不止于此，但这对于初学者来说是一个很好的用途。

首先，在 HTML 的 Head 部分中的任意脚本之前添加以下内容:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

其次，为方便起见，请提供表格和单选字段 ID 属性。这是稍后的事，以便我们可以在 JQuery 中轻松使用它们。我们还将尝试在可能的情况下使用 Div 或 Spans 以及我们需要使用的任何值，以避免 JQuery 出现任何问题，因为在实践中有时它不会与表一起使用。我不确定 .getValue1() 行在做什么，所以我会忽略它。

<Table id="firstTable">
     <tr>
          <TD>
               <input type="radio" name="test" id="radioButton">
          </TD>
          <TD>
               <span id="importantColumnData">${Data.getGenId().get(i)}</span>
          </TD>
          <TD>
          ${Data.getValue1().get(i)}
     </tr>
</Table>

最后，您需要调用代码!在您了解有关 JQuery 的更多信息之前，只需将所有内容放入 Document Ready block 中即可。我还将插入上面包含“重要列数据”的列。它应该看起来像这样:

$(document).ready(function() {
    $('#radioButton').click(function() {
        var tableText = '<table id="newTable">';
            tableText += '<tr>';
                tableText += '<td>';
                    tableText += $('#importantColumnData').html();
                tableText += '</td>';
            tableText += '</tr>';
        tableText += '</table>';
        $('#firstTable').after(tableText);
    });
});

请注意，我们在此 JQuery 代码中使用了之前添加到 HTML 元素中的 ID，并使用“#”符号。该符号用于 ID，句点 (.) 用于类，就像在 CSS 中一样。虽然有一种方法可以将字符串分成多行以避免这种麻烦，但作为 Javascript 新手，我建议首先习惯基本语法以避免人为错误。如果您还有任何其他问题，请告诉我。