HTML 可编辑 Table : 添加包含单选按钮的新行

Question

比方说，我有一个 editable html table。在其中一个 table 单元格中，它包含单选按钮。我想要的是添加一个新的行按钮。当我单击按钮时，新行应包含与 new group.

相同的单选按钮

比方说，当页面最初加载时 table 类似于：

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

我想说的是，下次当我点击添加新行按钮时，新行应该

包括具有新组名称组 2、组 3 .... 的相同单选按钮，应选中第一个单选选项

和其他 td (table 数据) 应该是 contenteditable 没有其中的值:

<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

希望这会有所帮助

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

工作Fiddle

Answer 2

为了在与某种元素（例如按钮）交互后向您的文档对象模型 (DOM) 添加新对象，可能需要一些 JavaScript。请参阅以下 fiddle：

简而言之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>

我在您的 DOM 中添加了一个 <button onclick="AddRow()">Add row</button>（在 HTML 中）并且我添加了一个具有函数 Addrow() 的脚本（请参阅 fiddle 供参考）。

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

HTML 可编辑 Table : 添加包含单选按钮的新行

HTML Editable Table : Add new row including radio buttons

html

javascript

jquery

contenteditable