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

Question

比方说，我有一个可编辑的 html 表格。在这些表格单元之一中，它包含单选按钮。我想要的是添加一个新的行按钮。当我单击按钮时，新行应包含与新组相同的单选按钮。比方说，当页面最初加载表格时，类似于：<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>您可以看到第一列有带有group1组名的单选按钮。我想说的是，下次当我单击添加新行按钮时，新行应该包括具有新组名称组 2、组 3 的相同单选按钮 .... 并且应检查第一个单选选项并且其他td （表数据）应该是 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

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

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

我<button onclick="AddRow()">Add row</button>向您的 DOM添加了一个（在 HTML 中），并添加了一个带有该函数的脚本Addrow()（请参阅小提琴以获取参考）。

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

Answer 2

希望这会有所帮助

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

})