We Keep Coding

Is option to assign ID to every checkbox inside dynamic table

This is my dynamic table
After clicking button it generate table based on input.
$(function () {
$("#btnGenerate").click(function () {
var textarea = document.getElementById("inglist");
var lines = textarea.value.replace(/\r\n/g,"\n").split(/:|,|\n/);
var lines2 = textarea.value.split(/(\d+(?:\.\d+)?)/);
lines.forEach((o, i) => o.id = i + 1);
var array1=new Array();
for (var i = 1; i < lines .length; i++) {
array1.push(lines [i].replace(/\[.*?\]/g, ''));}
const results = [];
array1.forEach(line => {
const filtered = line.split(/([\s\w]+)\s(\d+(?:\.\d+)?)(%?)\s*(\[\d\])?/g).filter(Boolean);
results.push(filtered);
});
var build = new Array();
build.push(["ING name:", "Total:","unit", "Count it?:","x2?"]);
var table1 = $("<table />");
for(var i=0;i<results.length;i++){
build.push(results[i]);
}
var countColumns = build[0].length;
console.log(countColumns);
var tables = $("<table /><class='form-control input-md'>");
//Add the header row.
var rows = $(tables[0].insertRow(-1));
for (var i = 0; i < countColumns; i++) {
var headerCell = $("<th /><class='form-control input-md'>");
headerCell.html(build[0][i]);
rows.append(headerCell);
}
//Add the data rows.
for (var i = 1; i < build.length; i++) {
row = $(tables[0].insertRow(-1));
for (var j = 0; j < countColumns; j++) {
var cell = $('<td><input type="checkbox"/>');
cell.html(build[i][j]);
row.append(cell);
}
}
var dvTable1 = $("#dvTable1");
dvTable1.html("");
dvTable1.append(tables);
});
How i can assign dynamic ID to every checkbox ?
And then how to filter only rows where is tick checkbox in 3rd column ( count in?: )

How to use checked values in table to make another table using javascript

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>

This is likelier closer to what you wanted
I do suggest you do not just throw some guessed code together - the code you posted was a mess of event handlers, DOM handling and jQuery
const a = ["a1", "a2", "a3"];
const b = ["b1", "b2", "b3"];
const c = ["c1", "c2", "c3"];
let html = [];
let html1 = [];
$(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("");
$("input[type='checkbox']").on("click", function() {
if (this.checked) {
let y = 0;
const code1 = this.value
for (var i = 0; i < code1; i++) {
html1.push("<table><tbody>");
y = y + 1;
html1.push(`<tr><th>${y}</th><td>${a[i]}</td><td>${b[i]}</td><td>${c[i]}</td></tr>`);
html1.push("</tbody></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>

const a = ["a1", "a2", "a3"];
const b = ["b1", "b2", "b3"];
const c = ["c1", "c2", "c3"];
let html = [];
let html1 = [];
$(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("");
var y = 0;
$("input[type='checkbox']").on("click", function() {
if (this.checked == true) {
const i = this.value
html1.push("<table><tbody>");
y = y + 1;
html1.push(`<tr><th>${y}</th><td>${a[i]}</td><td>${b[i]}</td><td>${c[i]}</td></tr>`);
html1.push("</tbody></table>");
}
if (this.checked == false) {
const i = this.value
html1.pop("<table><tbody>");
y = y - 1;
html1.pop(`<tr><th>${y}</th><td>${a[i]}</td><td>${b[i]}</td><td>${c[i]}</td></tr>`);
html1.pop("</tbody></table>");
}
document.getElementById("result").innerHTML = html1.join("");
});
});`enter code here`

Sum of the selected items of a pages drop down menus

My page has a table which has a series of drop down menus in one column (all of which contain a series of numbers), I want to run a function every time one of the values is changed, that takes the sum of the values and displays the result on the page. I believe my function (totalMarks), gets a collection of all my drop down menus, then loops through them, adding to the total the value of the selected index, and then displaying the total marks within a some h2 tags. Is my problem within the summing of the drop down menus or somewhere else?
function markForm(tagID) {
var x = document.getElementById(tagID)
var pre = document.createElement("pre");
x.appendChild(pre);
var SectionDetails = [
{ name: "Dynamic Table", maxMarks: 20},
{ name: "IntelliJ usage", maxMarks: 10},
{ name: "Calendar Controller", maxMarks: 30},
{ name: "Active Form", maxMarks: 20},
{ name: "Object Database", maxMarks: 20}
];
var table = pre.appendChild(document.createElement("table"));
var tableHeader = table.appendChild(document.createElement("thead"));
var tableRow = tableHeader.appendChild(document.createElement("tr"));
var headRow = tableRow.appendChild(document.createElement("th"));
headRow.appendChild(document.createTextNode("Section"));
headRow = tableRow.appendChild(document.createElement("th"));
headRow.appendChild(document.createTextNode("Max Mark"));
headRow = tableRow.appendChild(document.createElement("th"));
headRow.appendChild(document.createTextNode("Comments"));
headRow = tableRow.appendChild(document.createElement("th"));
headRow.appendChild(document.createTextNode("Mark"));
var resultsRows = table.appendChild(document.createElement("tbody"));
for (var i = 0; i < SectionDetails.length; i++) {
tableRow = resultsRows.appendChild(document.createElement("tr"));
var tableData = tableRow.appendChild(document.createElement("td"));
tableData.appendChild(document.createTextNode(SectionDetails[i].name));
tableData = tableRow.appendChild(document.createElement("td"));
tableData.appendChild(document.createTextNode(SectionDetails[i].maxMarks));
tableData = tableRow.appendChild(document.createElement("td"));
var tarea = document.createElement("textarea");
tarea.value = "Enter Comments";
tableData.appendChild(tarea);
tableData = tableRow.appendChild(document.createElement("td"));
var dropDown = document.createElement("select");
dropDown.name = SectionDetails[i].name;
dropDown.setAttribute("onchange", totalMarks());
for (var j = 0; j < (SectionDetails[i].maxMarks + 1); j++) {
var listItem = new Option(j);
listItem.value=j;
dropDown.appendChild(listItem);
}
tableData.appendChild(dropDown);
}
var h2 = document.createElement("h2");
h2.id = "headline";
h2.innerHTML = "Total Marks: 0";
x.appendChild(h2);
}
function totalMarks() {
var total = 0;
var ddmenus = document.getElementsByTagName("select");
for (var a = 0; a < ddmenus.length; a++) {
total = total + ddmenus[a].options[ddmenus[a].selectedIndex].value;
}
document.getElementsByTagName("h2").innerHTML = "Total Marks: " + total;
}
How the page should look, and does if I don't include the line "document.getElementById("marksline").innerHTML = "Total Marks: " + total;"
How the page looks if I leave the above mentioned line in the code.

there are two things to take care of:
parseInt the value of selected option
total = total + parseInt(ddmenus[a].options[ddmenus[a].selectedIndex].value);
Give the h2 an id (e.g. 'headline') and assign the value with getElementById
document.getElementById("headline").innerHTML = "Total Marks: " + total;
Edit: for clarification. If you getElementsByTagName you get an array of elements. For assigning a value you need to choose one out of the array e.g. document.getElementByTagName('h2')[0] would be the first h2 on the page.

You need to parse value of dropdown in integer as value is a string by default.
total = total + parseInt(ddmenus[a].options[ddmenus[a].selectedIndex].value);

how to add checkboxes in cells of first column of HTML table?

I am working on an app development which will read through my mailbox and list all the unread e-mails in a HTML table on my web-app upon click of a button. Below is the code which I have made while researching through google which solves for the purpose.
<!DOCTYPE html>
<html>
<body>
<button onclick="groupFunction()">Click me</button>
<table id="tblContents">
<tr onclick="tableClickTest()">
<th>Sender</th>
<th>Sent_Date</th>
<th>Received_By</th>
<th>Received_Date</th>
<th>Subject</th>
</tr>
</table>
<script>
function RowSelection()
{
var table = document.getElementById("tblContents");
if (table != null) {
for (var i = 0; i < table.rows.length; i++) {
for (var j = 0; j < table.rows[i].cells.length; j++)
table.rows[i].cells[j].onclick = function () {
tableText(this);
};
}
}
}
function tableText(tableCell) {
alert(tableCell.innerHTML);
}
function PopulateTable()
{
var objOutlook = new ActiveXObject("Outlook.Application");
var session = objOutlook.Session;
//alert(session.Folders.Count)
for(var folderCount = 1;folderCount <= session.Folders.Count; folderCount++)
{
var folder = session.Folders.Item(folderCount);
//alert(folder.Name)
if(folder.Name.indexOf("Premanshu.Basak#genpact.com")>=0)
{
for(var subFolCount = 1; subFolCount <= folder.Folders.Count; subFolCount++)
{
var sampleFolder = folder.Folders.Item(subFolCount);
//alert(sampleFolder.Name)
if(sampleFolder.Name.indexOf("test1")>=0)
{
for(var itmCount = 1; itmCount <= sampleFolder.Items.Count; itmCount++)
{
var itm = sampleFolder.Items.Item(itmCount);
if(!itm.UnRead)
continue;
var sentBy = itm.SenderName;
var sentDate = itm.SentOn;
var receivedBy = itm.ReceivedByName;
var receivedDate = itm.ReceivedTime;
var subject = itm.ConversationTopic;
// var contents = itm.Body;
var tbl = document.getElementById("tblContents");
if(tbl)
{
var tr = tbl.insertRow(tbl.rows.length);
// tr.onclick(tableClickTest())
if(tbl.rows.length%2 != 0)
tr.className = "alt";
var tdsentBy = tr.insertCell(0);
var tdsentDate = tr.insertCell(1);
var tdreceivedBy = tr.insertCell(2);
var tdreceivedDate = tr.insertCell(3);
var tdsubject = tr.insertCell(4);
// var tdcontents = tr.insertCell(5);
tdsentBy.innerHTML = sentBy;
tdsentDate.innerHTML = sentDate;
tdreceivedBy.innerHTML = receivedBy;
tdreceivedDate.innerHTML = receivedDate;
tdsubject.innerHTML = subject;
// tdcontents.innerHTML = contents;
}
//itm.UnRead = false;
}
break;
}
}
break;
}
}
return;
}
function groupFunction()
{
PopulateTable()
RowSelection()
}
</script>
</body>
</html>
The thing that I am now looking for and is unable to do is how do I add a checkbox in the first column in each row. Also upon checking this checkbox the entire row should get highlighted so that I can perform specific task on all the selected items.

As far as I have understood your code, your first column's data is being set as:
tdsentBy.innerHTML = sentBy;
So in the same line, you can add textbox as a string as:
var cbox = "<div class='select-box'>
<input type='checkbox' name='selectBox' class='select-row'>
</div?>"
tdsentBy.innerHTML = cbox + sentBy;
In this way, a checkbox will always be available in first column of every row.
Now in RowSelection function, to bind event you can do something like:
var checkBox = table.rows[i].cells[j].querySelector(".select-row");
checkBox.addEventListener("click",function(evt){
});

problems with creating tables/rows using pop/push

I'm trying to create a table in HTML using javascript. It has an add button that add's new rows and a delete button that removes rows. It looks like this :
the numbers are the ids
<table id = "table1" border = 2>
<tr>
<td> <img id="add" src="images/add_over.png" onclick=help() /> </td>
</tr>
</table>
Basically I'm trying to delete the whole table and recreate it with one row less.
var array1 = new Array();
function help() {
addRow();
push();
}
function addRow() {
var tableId= "table1";
var number= array1.length;
var newRow = document.getElementById(tableId).insertRow(number+ 1);
var newData = document.createElement("td");
var newDiv= document.createElement("div");
newDiv.innerHTML = array1.length;
newData.appendChild(newDiv);
var newCellDeleteButton = document.createElement("td");
var deleteButtonImg = document.createElement('img');
deleteButtonImg.id = number;
deleteButtonImg.border = '0';
deleteButtonImg.src = "images/delete_up.png";
deleteButtonImg.onmouseover = function() {
this.src = 'images/delete_over.png';
};
deleteButtonImg.onmouseout = function() {
this.src = 'images/delete_up.png';
};
deleteButtonImg.onclick = function() {
deleteRow(number);
};
newCellDeleteButton.appendChild(deleteButtonImg);
newRow.appendChild(newRow);
newRow.appendChild(newCellDeleteButton);
}
function deleteRow(rowID) {
var tempHelpRow = array1.length;
pop(rowID);
for (var i = 1; i <= tempHelpRow ; i++) {
document.getElementById("table1").deleteRow(1);
}
for (var i = 0; i <= array1.length; i++) {
addRow();
}
}
function pop(ID) {
array1.pop(ID);
}
function push() {
var test = new objectt();
array1.push(test);
}
function objectt() {
}
the problem is, that if i try to delete one row it deletes everything.