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>

上面是我动态生成的表格。我在该表格中有一个单选按钮，当我点击该单选按钮时，我需要在上面的表格下方创建一个新表格{{1里面的价值......

这可以使用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中轻松使用它们。我们还将尝试使用Divs或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块即可。我还将插入一个包含上面“重要列数据”的列。它应该是这样的：

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

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

Answer 2

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>';

Answer 3

在单选按钮的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";
}

使用单选按钮上的onclick功能生成动态表

3 个答案: