HTML 可编辑表：添加新行，包括单选按钮

Question

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>

Answer 1

Hope this will help

HTML

<table id="exp02Table" class="responsive-table table table-bordered">
  <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 class="addN">
 Add New
</button>

JS

$(".addN").on("click", function(e){
 var lastTr = $("#exp02TBody").find("tr:last-child")
 var clone = lastTr.clone();
 var groupName  = lastTr.find("input[type='radio']").attr("name");
 var lastGroupNum = parseInt(groupName.match(/\d/g).join(""));
 var newGroup = "group"+(lastGroupNum+1);
 clone.find("input[type='radio']").attr("name", newGroup);
 $("#exp02TBody").append(clone);
})

Working Fiddle

Answer 2

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=(ab) cm</th> <th> H = (cb) 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=(ab) cm</th> <th> H = (cb) 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>