Reputation: 19612
I have so far created a page that generates a dynamic table with data getting populated from database via entering a text in a text box. How can I now generate a radio button along with each row in a table that is dynamically generating.
<select id='two' name="info">
<option value="m">M</option>
<option value="h">H</option>
</select>
<input type="text" name="dynamicText">
<input type="submit" value="Submit Query">
</form>
<TABLE BORDER="1" CELLPADDING="1" CELLSPACING="1" style="text-align: center;">
<TR>
<TH>Ap</TH>
<TH>M</TH>
<TH>V</TH>
</TR>
<c:forEach var="i" begin="0" end="${Data.getH().size() - 1}">
<TR>
<TD>
${Data.getH().get(i)}
</TD>
<TD>
${Data.getM().get(i)}
</TD>
<TD>
${Data.getV().get(i)}
</TD>
</TR>
</c:forEach>
</TABLE>
In javascript we do have
var newRadio = document.createElement("input");
newRadio.type='radio';
But I am not getting how can I generate the radio buttons dynamically in front of dynamic table that is being generated already?
Any help would be really appreciated. Also please let me know if anything else is needed from my part.
[Edit] : Later I needed to select that Radio Button and generate another dynamic table, that has data coming from database.
For example,
Headers/column name: Radio button || Ap || M || V ||
Radio Button 1|| rtyy || valueM || valueV
.
.
.
.
If radio button 1 is selected, then it should pick that row and value of column "Ap" which is "rtyy" and query from database with that value and generate a dynamic table further.
I have made a connection and have the query already, but in order to generate another table with dynamic value from a table, I am lacking.
Do I need to create a simple onclick function and place in in javascript to generate the table? and if yes, how can I achieve the dynamic value that is in the first column of previous table?
Upvotes: 0
Views: 3448
Reputation: 169
The radio button should also be place in the row of the table so that as many rows of <td></td>
that will be created, the same number will also be created for the radio button.
Example:
<c:forEach var="i" begin="0" end="${Data.getH().size() - 1}">
<TR>
<td>
<input type="radio" name="xxxx" value="some value">some value
</td>
<TD>
${Data.getH().get(i)}
</TD>
<TD>
${Data.getM().get(i)}
</TD>
<TD>
${Data.getV().get(i)}
</TD>
</TR>
</c:forEach>
Using a javascript onClick function will be do, but do not know how to implement it using javascript.
Upvotes: 1