CODEWITHSUNDEEP
javajavascriptjqueryhtmljsp
AKIWEB
AKIWEB

Reputation: 19612

How to show a value in a new table depending on which radio button is clicked?

Below is my table in the jsp page which is getting generated dynamically -

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

Here first column in the first row is radio button, and second column in the first row is GenId. Similarly, first column in the second row is radio button, and second column in the second row is different GenId. And similarly for other rows and column...

Problem Statement:-

Now what I am suppose to do is - As soon as I click on each radio button in a particular row, I would like to show value of GeId in a new table just below the firstTable.

So I got the below jquery code which works fine for only first row radio button, meaning if I click first row radio button then it is making a new table properly with the GenId value, but it doesn't work for second row radio button... And if I keep on clicking first row radio button, then it keeps on generating a new table always.. I just need to have one table which should show value basis on whether I am clicking first radio button or second radio button.

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

I guess as the id of radio button is always same for each table row, may be that's why it is not working?

What wrong I am doing in my above code? Can anyone provide a simple jsfiddle example which can help me to understand?

UPDATE:-

This is my firstTable rendered 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>

As soon as I am clicking first row radio button, it should show 16192153 value in the new table just below firsTable and if I am clicking second row radio button, then it should show 19745383 value in the same new table only just below firstTable..

ANOTHER UPDATE:-

I am able to make that work with the suggestions you guys have suggested..

Now I am seeing one more issue.. After getting importantColumnData value, I am passing it to connection.jsp page which will use this value to make a query against a database using ajax and then it return backs the response in the data value.. And now I am using this data value to iterate and grab all the values from it and put it in a newTable as shown below - 

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

So for the first time, when I click first row radio button, it shows me the correct value in new table but if I again click the same radio button, then it is showing me only importantColumnData across all the columns in that row which is wrong.. Instead of that it should show the same column values which was shown when I click for the first time..

As I can see in the else block I am just putting only importantColumnData value.. How do I modify this to start showing the original column values which was shown for the first time when I clicked the first row radio button?

Upvotes: 0

Views: 2079

Answers (6)

Rakesh Kumar
Rakesh Kumar

Reputation: 2853

Try this.

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

Upvotes: 3

Pramod
Pramod

Reputation: 141

Remove Id and add classes to Radio button and SPAN element See the 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);
            }
        });
    });

Upvotes: 1

Ashwani Pradhan
Ashwani Pradhan

Reputation: 19

Change your table like below (just changed id to class and apply rel for value)- 

<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 should be like below - 

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

Upvotes: 2

dfsq
dfsq

Reputation: 193261

Wrong is that you are using id instead of classes. #importantColumnData and #radioButton should be unique. Change your HTML and JS accordingly:

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

and js:

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

Demo: http://jsfiddle.net/77mPc/

Upvotes: 1

Pradeep
Pradeep

Reputation: 116

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

  });
});

Upvotes: 0

Anand Natarajan
Anand Natarajan

Reputation: 1162

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

Upvotes: 1

Related Questions