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

时间：2014-03-05 06:22:06

标签： java javascript jquery html jsp

以下是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，那么我会在{{1}下方的新表中显示10值}}。
  • 现在，如果我点击第二行单选按钮，第二行firstTable的值为GenId，那么它应仅在{{1}下面的新表中显示20值}} ...

所以我得到了下面的jquery代码，它只适用于第一行单选按钮，这意味着如果我单击第一行单选按钮然后它正在使用20值正确创建一个新表，但它没有为第二行单选按钮工作......如果我继续点击第一行单选按钮，那么它会一直生成一个新表...我只需要有一个表，它应该显示我是否点击第一个收音机的价值基础按钮或第二个单选按钮。

firstTable

我猜因为单选按钮的id对于每个表行总是相同的，可能这就是为什么它不起作用？

我在上面的代码中做错了什么？任何人都可以提供一个简单的jsfiddle示例，可以帮助我理解吗？

更新： -

这是我的GenId呈现的html - 

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

只要点击第一行单选按钮，它就会在firstTable下面的新表格中显示<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> 值，如果我点击第二行单选按钮，则应显示{{ 1}}仅在16192153 ...

下方的同一新表中的值

另一个更新： -

我能够根据你们建议的建议来完成这项工作。

现在我又看到了一个问题..获取firsTable值后，我将其传递给19745383页面，该页面将使用此值使用firstTable对数据库进行查询然后它返回importantColumnData值中的响应。现在我使用此connection.jsp值来迭代并从中获取所有值并将其放入ajax中，如图所示下面 - 

data

因此，当我第一次单击第一行单选按钮时，它会在新表中显示正确的值，但是如果我再次单击相同的单选按钮，则它仅向我显示data所有该行中的列是错误的..而不是它应该显示我第一次点击时显示的相同列值..

正如我在else块中看到的那样，我只是放了newTable值..如何修改它以开始显示我点击第一行无线电时第一次显示的原始列值按钮？

6 个答案:

答案 0 :(得分：3)

试试这个。

$(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

答案 1 :(得分：2)

如下所示更改您的表格（只需将ID更改为类并将rel应用于值） - 

<Table id="firstTable">
<c:forEach var="i" begin="0" end="${reportData.getHash().size() - 1}">
    <TR>
    <TD>
        <input type="radio" name="test" class="radioButton" rel="${Data.getValue1().get(i)}">
    </TD>
    <TD>
        <span id="importantColumnData">${Data.getGenId().get(i)}</span>
    </TD>
    <TD>
    ${Data.getValue1().get(i)}
    </TD>
    </TR>
</c:forEach>
</Table>

jQuery应该如下 - 

$(document).ready(function() {
    $('.radioButton').click(function() {
        var genId = $(this).attr('rel');
    $('#newTable tr:last').after('<tr><td>'+genId+'</td></tr>');        
    });
});

答案 2 :(得分：1)

错误的是您使用的是id而不是类。 #importantColumnData和#radioButton应该是唯一的。相应地更改HTML和JS：

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

和js：

$('.radioButton').click(function() {
    alert($('.importantColumnData', $(this).closest('tr')).html());
});

演示：http://jsfiddle.net/77mPc/

答案 3 :(得分：1)

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

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


        var tableText="";

        if($("#newTable").length == 0) 
        tableText += '<table id="newTable">';
        tableText += '<tr>';
        tableText += '<td>';
        tableText += $('#importantColumnData').html();
        tableText += '</td>';
        tableText += '</tr>';

        if($("#newTable").length == 0) 
        { 
          tableText += '</table>';
          $('#firstTable').after(tableText);
        }
       else
         $('#newTable').html(tableText);
    });
   });

答案 4 :(得分：1)

删除Id并将类添加到单选按钮和SPAN元素 请参阅Demo 

<table id="firstTable">
    <tr>
        <td><input type="radio" name="radio" class="radioButton"></td>
        <td><span class="importantColumnData">10</span></td>
    </tr>
    <tr>
        <td><input type="radio" name="radio" class="radioButton"></td>
        <td><span class="importantColumnData">20</span></td>
    </tr>
    <tr>
        <td><input type="radio" name="radio" class="radioButton"></td>
        <td><span class="importantColumnData">30</span></td>
    </tr>

</table>

$(document).ready(function() {
        $('.radioButton').click(function() {                
            var importantColumnData = $(this).closest("tr").find(".importantColumnData").text();                
           if($("#newTable").length == 0)
           {
            console.log(importantColumnData);
                var tableText = '<table id="newTable">';
                    tableText += '<tr>';
                    tableText += '<td>';
                    tableText += importantColumnData;
                    tableText += '</td>';
                    tableText += '</tr>';
                    tableText += '</table>';
                $('#firstTable').after(tableText);
            }
            else{
                $("#newTable tr td").text(importantColumnData);
            }
        });
    });

答案 5 :(得分：0)

$(document).ready(function(){
  $('#firstTable tr td').on('click',function(){
    var nextTdText = $(this).next().children('span').text();
     if($('#newTable').length == 0){
    var newTable="<table id="newTable"><tr><td id="clickedVal"></td></tr></table>";
     $('#firstTable').after(newTable);
     }
     $('#clickedVal').text(nextTdText);

  });
});
相关问题
最新问题