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

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>

函数pop（）{
//表可以在这里生成吗？？
}
${Data.getGenId（）.get（i）}
${Data.getValue1（）.get（i）}

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

GenId

值

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

---

我是一个新手，与javascript和JSP打交道任何帮助都会非常有用。

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

作为一个新手，最好的选择是使用JQuery这样的库。使用JQuery，它运行于一种叫做Sizzle选择器引擎的东西，您可以轻松地在页面的任何地方插入HTML。JQuery的开销相对较低，由Google托管，并且易于使用。JQuery的好处远远不止于此，但对于初学者来说，这是一个很好的用法

首先，在任何脚本之前，在HTML的标题部分包括以下内容：

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

其次，为方便起见，请提供表格和无线电字段ID属性。这是为以后准备的，因此我们可以在JQuery中轻松地使用它们。在可能的情况下，我们还将尝试在需要使用的任何值中使用div或span，以避免JQuery出现任何问题，因为在实践中，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>

${Data.getGenId（）.get（i）}
${Data.getValue1（）.get（i）}

最后，您需要调用代码！在进一步了解JQuery之前，只需将所有内容放在一个文档就绪块中。我还将插入一列，其中包含上面的“重要列数据”。应该是这样的：

$(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);
    });
});

$（文档）.ready（函数（）{
$（'#radioButton'）。单击（函数（）{
var tableText=''；
tableText+=''；
tableText+=''；
tableText+=$（'#importantColumnData'）.html（）；
tableText+=''；
tableText+=''；
tableText+=''；
$（'#firstTable'）。在（tableText）之后；
});
});

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

var html；
var html;  
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
            var cell1 = row.insertCell(0);

            html = '<input type="radio" name="test" onclick= pop()>';
            cell1.innerHTML = html; 
            html = '${Data.getGenId().get(i)}';
            var cell2 = row.insertCell(1);
            cell2.innerHTML = html; 
           html ='${Data.getValue1().get(i)}>'</td>';

var table=document.getElementById（tableID）；
var rowCount=table.rows.length；
var row=table.insertRow（rowCount）；
var cell1=行插入单元格（0）；
html=''；
cell1.innerHTML=html；
html='${Data.getGenId（）.get（i）}'；
var cell2=行插入单元格（1）；
cell2.innerHTML=html；
html='${Data.getValue1（）.get（i）}>'；

在单选按钮的onclick事件上调用函数

function myFunction()
{
    var table = document.getElementById("myTable");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = "NEW CELL1";
    cell2.innerHTML = "NEW CELL2";
}

---

您显示的表必须克隆吗？不，上表中的第一列是单选按钮，第二列是GenID。因此，当我点击单选按钮时，它应该选择GenID并将其显示在上表下方的新表中。谢谢你，Lavalamp先生，这确实是一个非常有用的答案。因此，单击单选按钮id后，将在第一个表之后创建新表。新表中的列是否也可以从任何数据源动态填充？另外，如何让#firstTable中的列值GenID显示在我的#newTable中。您可以将JQuery的.after（）方法提供给任何字符串，这样我就可以填充一个变量。这样，您可以将字符串连接在一起，然后将该变量放在.after（）方法的括号之间。Javascript的连接运算符是加号（+）。可以使用.HTML（）方法获取列的HTML。尽管纸上的表和Javascript/JQuery没有问题，但我发现在实践中经常会有问题，如果可能的话，您应该尝试将span/div合并到表中以避免任何问题。我将用这些更新的信息更新答案。（如果我有帮助，请一定要投票/接受我的答案！我现在正在试用Stack Overflow，因为我问了一些与Java有关的明显愚蠢的问题，在我帮助别人之前，我不能再问任何问题。）谢谢Lavalamp先生的回答，再简单一个问题，我还可以生成一个具有固定列但有多行的动态表。基本上，我在这里试图实现的是，从#firstTable中获取GenID值，然后单击radioButton（这将使用该GenID从数据库进一步查询，并将结果填充到#newTable after#firstTable中）。我希望我没有把您弄糊涂。当然，您可以使用一个表达式在每个表中查找一列，并将其中一列的内部HTML放入另一列：$（'employee'）.find（'id'）.HTML（$（'employee_detail'）.find（'designation'）.HTML（））；