假设,我有一个可编辑的html表。在这些表单元格之一中,它包含单选按钮。我想要的是添加一个新的行按钮。当我单击按钮时,新行应包含与new group。
相同的单选按钮。比方说,页面最初加载表时类似:
<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(表格数据)应该是内容可编辑的,没有值]:
<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>
希望这会有所帮助
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
为了在与某种元素(如按钮)交互之后向您的文档对象模型(DOM)添加新对象,可能需要一些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()
的脚本(请参阅小提琴以获取参考)。