I have creating a html table with javascript function in a page. and i need to create a checkbox in each of the last column in each row from my table1 and if the checkbox is checked then the elements of table1 is to be added to table2 without checkbox. I don't know how to do that. anyone can help me? please give me an example for that.
the code used by me is this:-
const a = ["a1", "a2", "a3"];
const b = ["b1", "b2", "b3"];
const c = ["c1", "c2", "c3"];
let html = [];
window.addEventListener("load", function() {
html.push("<table><tbody>");
for (var i = 0; i < a.length; i++) {
j = i + 1;
html.push(`<tr><td>${j}</td><td>${a[i]}</td><td>${b[i]}</td><td>${c[i]}</td>`);
html.push(`<td><input type="checkbox" value="${i}" name="code"></td></tr>`)
}
html.push("</tbody></table>");
document.getElementById("container").innerHTML = html.join("");
});
$(document).ready(function() {
var y = 0;
$("input[type='checkbox']").onclick(function() {
var code1 = $("input[name='code']:checked").val();
for (var x = 0; x < code1.length; x++) {
if ($(this).prop("checked") == true) {
window.addEventListener("load", function() {
html1.push("<table><tr>");
y = y + 1;
html1.push(`<tr><th>${y}</th><td>${a[x]}</td><td>${b[x]}</td><td>${c[x]}</td></tr>`);
html.push("</table>");
});
});
});
document.getElementById("result").innerHTML = html1.join("");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>
<div id="result"></div>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…