java - 如何根据单击的单选按钮在新表中显示值？

Question

下面是我在 jsp 页面中动态生成的表格 -

<Table id="firstTable">
<c:forEach var="i" begin="0" end="${reportData.getHash().size() - 1}">
    <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)}
    </TD>
    </TR>
</c:forEach>
</Table>

这里第一行的第一列是 radio button ，第一行第二列是 GenId 。同样，第二行第一列是 radio button ，第二行第二列不同 GenId 。对于其他行和列也类似......

问题陈述:-

现在我应该做的是 - 一旦我单击特定行中的每个单选按钮，我想显示 GeId 的值在firstTable下方的新表中.

• 所以假设如果我单击第一行单选按钮和 GenId 的值是10在第一行，然后我会显示 10位于firstTable下方的新表中的值.
• 现在，如果我单击第二行单选按钮和 GenId 的值是 20在第二行，那么它应该显示 20值仅在下面的新表 firstTable 中...

所以我得到了下面的 jquery 代码，它仅适用于第一行单选按钮，这意味着如果我单击第一行单选按钮，那么它会使用 GenId 正确创建一个新表。值，但它不适用于第二行单选按钮...如果我继续单击第一行单选按钮，那么它总是不断生成一个新表..我只需要一个应该显示值基础的表关于我是单击第一个单选按钮还是第二个单选按钮。

$(document).ready(function() {
    $('#radioButton').click(function() {

        alert($('#importantColumnData').html());

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

我猜因为每个表行的单选按钮 id 始终相同，这可能就是它不起作用的原因？

我上面的代码做错了什么？谁能提供一个简单的 jsfiddle 示例来帮助我理解？

更新:-

这是我的firstTable渲染的 html -

<TABLE id="firstTable" name="FirstTable">
    <TR style="color:#ffffff;background-color:#787878;">
        <TH>Select</TH>
        <TH>GenId</TH>
    </TR>

        <TR>
            <TD>
                <input type="radio" name="radioValue" value="some value" id="radioButton">
            </TD>
            <TD>
                <span id="importantColumnData" name="colDat">16192153</span>

            </TD>
        </TR>

        <TR>
            <TD>
                <input type="radio" name="radioValue" value="some value" id="radioButton">
            </TD>
            <TD>
                <span id="importantColumnData" name="colDat">19745383</span>

            </TD>
        </TR>
</TABLE>

当我单击第一行单选按钮时，它应该显示 16192153下面新表中的值 firsTable如果我单击第二行单选按钮，那么它应该显示 19745383同一个新表中的值仅低于 firstTable ..

另一个更新:-

我能够根据你们提出的建议来实现这一点。

现在我又看到一个问题..在获取 importantColumnData 后值，我将其传递给 connection.jsp页面将使用此值通过 ajax 对数据库进行查询然后它返回 data 中的响应值..现在我正在使用这个data value 进行迭代并从中获取所有值并将其放入 newTable 中如下图-

<script>
$(document).ready(function () {
$('.radioButton').click(function () {

    alert($(this).closest("tr").find(".importantColumnData").text());
    var importantColumnData = $(this).closest("tr").find(".importantColumnData").text();

    $.getJSON("connection.jsp", {'name': importantColumnData}, function (data) {

        // added as per suggestion
        if($("#newTable").length == 0) {
            var tableText = '<table id="newTable" BORDER="1" CELLPADDING="0" CELLSPACING="1" style="text-align:center;">';
            tableText +='<br/><br/>';
            tableText +='<tr style="color:#ffffff;background-color:#787878;">'
            tableText += '<th>Category Name</th>';
            tableText +='<th>Attributes</th>';
            tableText +='<th>Libraries</th>';
            tableText +='<th>Developer</th>';
            tableText += '<th>Sources</th>';
            tableText +='</tr>';
            var tbl_body = "";
            $.each(data, function () {
                var tbl_row = "";
                $.each(this, function (k, v) {
                    tbl_row += "<td>" + v + "</td>";
                })
                tbl_body += "<tr>" + tbl_row + "</tr>";
            })
            tableText += "<tbody>" + tbl_body + "</tbody>";
            $('#firstTable').after(tableText);
    } else {
        // added as per suggestion
        $("#newTable tr td").text(importantColumnData);
    }
    });

});
});
</script>

因此，当我第一次单击第一行单选按钮时，它会在新表中显示正确的值，但如果我再次单击相同的单选按钮，那么它只会向我显示 importantColumnData该行中的所有列都是错误的。相反，它应该显示与我第一次单击时显示的相同的列值。

正如我在 else block 中看到的那样，我只放置 importantColumnData值..如何修改它以开始显示当我单击第一行单选按钮时第一次显示的原始列值？

Answer 1

试试这个。

$(document).ready(function() {
    $(document).on('click', 'input[type="radio"]', function() {

        if( $(this).prop('checked') ){
            var text = $(this).parent().next(".importantColumnData").text(),
                tableText = '<table id="newTable"><tr><td>'+ text +'</td></tr></table>';
                $('#newTable').remove();
                $('body').append(tableText);
        }
    });
});

Fiddle Demo