Let's say, I have an editable html table. In one of these table cells it contains radio button. What I want is to add a new row button. When I click the button the new row should contain same radio buttons with new group.
Let's say, when the page initially loads the table is something like:
<table id="exp02Table" class="responsive-table">
<thead>
<tr class="bengaliText">
<th> (P)</th>
<th> (a cm)</th>
<th> (b cm)</th>
<th> (c cm)</th>
<th> L=(a-b) cm</th>
<th> H = (c-b) cm </th>
<th> P = H±h</th>
<th> PV = (H±h)*L</th>
</tr>
</thead>
<tbody id="exp02TBody">
<tr>
<td>
<p> <label> <input value="0" checked name="group1" type="radio" /> <span>বায়ু মন্ডলের চাপ</span> </label> </p>
<p> <label> <input value="1" name="group1" type="radio" /> <span>বায়ু মন্ডলের চাপের বেশী</span> </label> </p>
<p> <label> <input value="2" name="group1" type="radio" /> <span>বায়ু মন্ডলের চাপের কম</span> </label> </p>
</td>
<td contenteditable></td>
<td contenteditable></td>
<td contenteditable></td>
<td contenteditable></td>
<td contenteditable></td>
<td contenteditable></td>
<td contenteditable></td>
</tr>
</tbody>
</table>
You can see the first column has radio buttons with group1 group name.
What I am trying to say is that next time when I click the add new row button the new row should
include same radio buttons with new group name group 2, group 3 .... and the first radio option should be checked
and the other td (table data) should be contenteditable with no values in it:
<tr>
<td>
<p> <label> <input value="0" checked name="group2" type="radio" /> <span>বায়ু মন্ডলের চাপ</span> </label> </p>
<p> <label> <input value="1" name="group2" type="radio" /> <span>বায়ু মন্ডলের চাপের বেশী</span> </label> </p>
<p> <label> <input value="2" name="group2" type="radio" /> <span>বায়ু মন্ডলের চাপের কম</span> </label> </p>
</td>
<td contenteditable></td>
<td contenteditable></td>
<td contenteditable></td>
<td contenteditable></td>
<td contenteditable></td>
<td contenteditable></td>
<td contenteditable></td>
</tr>
In order to add a new object to your Document Object Model (DOM) after interaction with some kind of elements such as a button, some JavaScript might be required. See the following fiddle:
In plain JavaScript:
let i = 1;
function AddRow() {
i++;
let tbody = document.getElementById("exp02TBody");
let tr = document.createElement("tr");
//The HTML for the row. Obviously not as readable in JavaScript so there might a bit cleaner solution to this but at least it's functional:
tr.innerHTML =
"<td><p><label><input value='0' checked name='group-" + i + "' type='radio'> বায়ু মন্ডলের চাপ</label></p><p><label><input value='1' name='group-" + i + "' type='radio'> বায়ু মন্ডলের চাপের বেশী</label></p><p><label><input value='2' name='group-" + i + "' type='radio'> বায়ু মন্ডলের চাপের কম</label></p></td><td contenteditable></td><td contenteditable></td><td contenteditable></td><td contenteditable></td><td contenteditable></td><td contenteditable></td><td contenteditable></td>";
tbody.appendChild(tr);
}<table id="exp02Table" class="responsive-table">
<thead>
<tr class="bengaliText">
<th> (P)</th>
<th> (a cm)</th>
<th> (b cm)</th>
<th> (c cm)</th>
<th> L=(a-b) cm</th>
<th> H = (c-b) cm </th>
<th> P = H±h</th>
<th> PV = (H±h)*L</th>
</tr>
</thead>
<tbody id="exp02TBody">
<tr>
<td>
<p> <label> <input value="0" checked name="group1" type="radio" /> <span>বায়ু মন্ডলের চাপ</span> </label> </p>
<p> <label> <input value="1" name="group1" type="radio" /> <span>বায়ু মন্ডলের চাপের বেশী</span> </label> </p>
<p> <label> <input value="2" name="group1" type="radio" /> <span>বায়ু মন্ডলের চাপের কম</span> </label> </p>
</td>
<td contenteditable></td>
<td contenteditable></td>
<td contenteditable></td>
<td contenteditable></td>
<td contenteditable></td>
<td contenteditable></td>
<td contenteditable></td>
</tr>
</tbody>
</table>
<button onclick="AddRow()">Add row</button>I added a <button onclick="AddRow()">Add row</button> to your DOM (in the HTML) and I added a script with the function Addrow() (please see the fiddle for referencce).
In jQuery:
$(document).ready(function() {
let i = 1;
$("#row-button").on("click", function() {
i++;
$("#exp02TBody").append("<tr><td><p><label><input value='0' checked name='group-" + i + "' type='radio'> বায়ু মন্ডলের চাপ</label></p><p><label><input value='1' name='group-" + i + "' type='radio'> বায়ু মন্ডলের চাপের বেশী</label></p><p><label><input value='2' name='group-" + i + "' type='radio'> বায়ু মন্ডলের চাপের কম</label></p></td><td contenteditable></td><td contenteditable></td><td contenteditable></td><td contenteditable></td><td contenteditable></td><td contenteditable></td><td contenteditable></td></tr>");
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="exp02Table" class="responsive-table">
<thead>
<tr class="bengaliText">
<th> (P)</th>
<th> (a cm)</th>
<th> (b cm)</th>
<th> (c cm)</th>
<th> L=(a-b) cm</th>
<th> H = (c-b) cm </th>
<th> P = H±h</th>
<th> PV = (H±h)*L</th>
</tr>
</thead>
<tbody id="exp02TBody">
<tr>
<td>
<p> <label> <input value="0" checked name="group1" type="radio" /> <span>বায়ু মন্ডলের চাপ</span> </label> </p>
<p> <label> <input value="1" name="group1" type="radio" /> <span>বায়ু মন্ডলের চাপের বেশী</span> </label> </p>
<p> <label> <input value="2" name="group1" type="radio" /> <span>বায়ু মন্ডলের চাপের কম</span> </label> </p>
</td>
<td contenteditable></td>
<td contenteditable></td>
<td contenteditable></td>
<td contenteditable></td>
<td contenteditable></td>
<td contenteditable></td>
<td contenteditable></td>
</tr>
</tbody>
</table>
<button id="row-button">Add row</button>