亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

HTML 可編輯表：添加新行，包括單選按鈕

HTML 可編輯表：添加新行，包括單選按鈕

回首憶惘然 2022-01-07 19:31:14
比方說，我有一個可編輯的 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>
查看完整描述

2 回答

?
慕少森

TA貢獻2019條經驗 獲得超9個贊

為了在與某種元素（例如按鈕）交互后向文檔對象模型 (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>


查看完整回答
反對 回復 2022-01-07
?
三國紛爭

TA貢獻1804條經驗 獲得超7個贊

希望這會有所幫助


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

})


查看完整回答
反對 回復 2022-01-07
  • 2 回答
  • 0 關注
  • 221 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號