Generate Dynamic table using onclick function on radio button

Question

Javascript function:

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

Above is my table which is getting generated dynamically.. I have a radio button in that table and as soon as I am clicking that radio button I need to make a new table just below the above table which will have GenId value inside that...

Is this possible to do the creation using the onclick function in javascript? or any other way?

I am a newbie and getting along with javascript and JSP any help would be very helpful.

Answer 1

This post has been edited based on discussion in the comments.

As a newbie, your best bet here is going to be with a library like JQuery. Using JQuery, which runs off of something called the Sizzle selector engine, you can easily insert HTML anywhere in the page. JQuery is relatively low overhead, hosted by Google, and easy to use. JQuery is good for a lot more than this too, but this is a great use of it for a beginner.

First, include the following in the Head section of your HTML, before any of the script:

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

Second, for convenience give your table and radio fields ID properties. This is for later so we can work with them easily in JQuery. We will also try and use Divs or Spans when possible with any values we need to use to avoid any problems with JQuery, because in practice it sometimes doesn't play will with tables. I'm not sure what the .getValue1() line is doing, so I will ignore it.

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

Finally, you need to call the code! Until you learn more about JQuery, just put everything in a Document Ready block. I will also insert a column with the "important column data" from above. It should look like so:

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

Notice that we used the IDs in this JQuery code that we added to the HTML elements previously, using the '#' sign. This symbol is used for IDs, and a period(.) is used for classes, just like in CSS. While there is a way to break strings up over multiple lines to avoid this hassle, as a Javascript newbie I recommend getting used to basic syntax first to avoid human error. If you've got any other questions let me know.

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

call the function on onclick event of radio button

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";
}