Develop Reference

How to create a JavaScript loop that adds DOM properties to attributes?

I have a table with cells that are not contentEditable. However, using a JavaScript loop or function, I would like to make them so.
I understand that it is very simple to do this manually for each cell, and this would probably be easier for a table with only a few cells, but I would like to quicken this process with a loop/function for the table could become much larger, and the time spent manually setting each cell to be contentEditable would be tedious.
Below is a quick example that displays a table calculator, un-editable at present. But using a loop or function, I'd like to make every cell in the right column set to .contentEditable = true in the DOM. I imagine that the parameters would look something like (var i = 0; l != rows.length; i < l; i+2), but I'm struggling with what the statements following the argument would have to be for the loop/function to work. Any help would be much appreciated!
function myFunction() {
var jack2 = document.getElementById("jack").innerText;
var john2 = document.getElementById("john").innerText;
var joe2 = document.getElementById("joe").innerText;
var total2 = (parseInt(jack2) || 0) + (parseInt(john2) || 0) + (parseInt(joe2) || 0);
document.getElementById("total").innerHTML = total2;
}
table {
width: 100%;
}
table,
tr,
th,
td {
border: 1px solid gray;
border-collapse: collapse;
font-family: Arial;
margin: 5px;
}
<table>
<caption>Weight Calculator</caption>
<tr class="cell">
<th>Person</th>
<th>Weight (kg)</th>
</tr>
<tr class="cell">
<td>Jack</td>
<td id="jack" oninput="myFunction()">1</td>
</tr>
<tr class="cell">
<td>John</td>
<td id="john" oninput="myFunction()">2</td>
</tr>
<tr class="cell">
<td>Joe</td>
<td id="joe" oninput="myFunction()">3</td>
</tr>
<tr class="cell">
<td>Total</td>
<td id="total"></td>
</tr>
</table>

Get all cell in the tabel that have a left neigbour (the header is not effected because there are th and not td). Add to each of these cells your attribute.
Edited: For getting the totalsum add an eventlistener on each td that calls the calc-function if the content changes.
function myFunction() {
let weightCells = document.querySelectorAll("table tr:not(:last-child) td ~ td");
weightCells.forEach(td => {
td.setAttribute('contentEditable', true);
td.addEventListener ("change", calcSum());
});
}
function calcSum() {
let sum=0;
let weightCells = document.querySelectorAll("table tr td ~ td");
let count = weightCells.length-1;
for (i=0; i<count; i++) {
sum += parseInt(weightCells[i].innerHTML) || 0;
}
weightCells[count].innerHTML = sum;
}
myFunction();
table {
width: 100%;
}
table,
tr,
th,
td {
border: 1px solid gray;
border-collapse: collapse;
font-family: Arial;
margin: 5px;
}
<table>
<caption>Weight Calculator</caption>
<tr class="cell">
<th>Person</th>
<th>Weight (kg)</th>
</tr>
<tr class="cell">
<td>Jack</td>
<td id="jack" oninput="myFunction()">1</td>
</tr>
<tr class="cell">
<td>John</td>
<td id="john" oninput="myFunction()">2</td>
</tr>
<tr class="cell">
<td>Joe</td>
<td id="joe" oninput="myFunction()">3</td>
</tr>
<tr class="cell">
<td>Total</td>
<td id="total"></td>
</tr>
</table>

You can select the whole table, then use querySelectorAll to get all rows then for each rows change the contenteditable for the second td like this
codepen
let table = document.getElementById('table')
let rows = table.querySelectorAll('tr')
rows.forEach(row => {
let tds = row.querySelectorAll('td')
// all the cells of the row
if (tds.length > 0) { // if it is not the header
tds[1].contentEditable = true
// change the contenteditable
}
})
(you need to add an id to your table in case you have more than one table)
<table id="table">
...
</table>

Delete Dynamic HTML table using table id?

I'm creating multiple tables from one table (table id = table6)
If I created a new table from table id ='table6', I want to delete that newly generated table using its table id. I have assigned table ids to the newly generated tables. what's wrong in my code?
I want to delete this HTML table. Any hint?
var aggTableNum = 0;
function generateAgg() {
const originTable = document.getElementById('table6');
const baseRowTbl = originTable.querySelector('tbody tr');
let newTable = originTable.cloneNode(true);
let newTbody = newTable.querySelector('tbody');
newTable.id = 'newAggTable' + ++aggTableNum;
// for (i = 0; i < 0; i++) {
// newTbody.appendChild(baseRowTbl.cloneNode(true));
// }
newTable.querySelectorAll('input').forEach((element) => {
element.value = '';
});
document.body.appendChild(newTable);
}
function tID() {
$('table').on('click', 'button', function (e) {
alert(e.delegateTarget.id);
var tbl = e.delegateTarget.id;
console.log(tbl);
// if (tbl) tbl.parentNode.removeChild(tbl);
$(tbl).remove();
});
}
table {
border-collapse: collapse;
margin: 1em;
}
thead {
background-color: lightblue;
}
td,
th {
border: solid grey 1px;
padding: 1em;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button style="margin: 1%" onclick="generateAgg()">Generate New Table</button>
<table id="table6">
<thead>
<th colspan="6">Table</th>
<tr>
<th> Column 1 </th>
<th> Column 2 </th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input>
</input>
</td>
<td><input>
</input></td>
</tr>
<tr>
<td>
<button style="margin: 1%" onclick="tID()">delete </button>
</td>
</tr>
</tbody>
</table>
JsFiddle link - > https://jsfiddle.net/shreekantbatale2/hn0286zd/8/

Though you are getting the table id's value, need to refer that properly with jquery with a leading # in the selector.
Change this:
$(tbl).remove();
...to:
$('#' + tbl).remove();
Then the table removes.

How to add Row into dynamic html table?

I have created one div that is not visible, in that div main table is hidden and I'm cloning that table into another div. that div id is main-div.
I want to add a row into that newly generated table? how to append rows using jQuery?
generate table function, delete table function, and remove row function are in working condition.
adding new row using javascript or Jquery which better way to handle? any hint?
// ==================== //
// Add aggregate Table//
// ==================== //
var aggTableNum = 0;
$('.addAggregatorCompo').click(function (e) {
const originTable = document.getElementById('aggregator-table');
let newTable = originTable.cloneNode(true);
newTable.id = 'newAggTable' + ++aggTableNum;
newTable.querySelectorAll('input').forEach((element) => {
element.value = '';
});
$('#main-div').append(newTable);
});
// ==================== //
// Delete Component //
// ==================== //
$('#main-div').on('click', '.delete-component', function (e) {
e.preventDefault(); // in case it is not a type=button and the table is wrapped in a form
this.closest('table').remove();
});
// ==================== //
// Delete Records//
// ==================== //
$('#main-div').on('click', '.delete-record', function () {
$('table tbody')
.find('input[name="record"]')
.each(function () {
if ($(this).is(':checked')) {
$(this).parents('tr').remove();
}
});
});
// ==================== //
// Add Aggregate records //
// ==================== //
$('#main-div').on('click', '.add-record', function () {
$('<tr>')
.append($('<td>').append('input'))
.append($('<td>').append('text2'))
.append($('<td>').append('text3'))
.append($('<td>').append('text4'));
});
#aggregator-table {
display: none;
}
table {
border-collapse: collapse;
margin: 1em;
}
thead {
background-color: lightblue;
}
td,
th {
border: solid grey 1px;
padding: 1em;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button style="margin: 1%" class="addAggregatorCompo">Add Table</button>
<table id="aggregator-table" class="component-base">
<thead>
<th colspan="6">Aggregator</th>
<tr>
<th> Select</th>
<th> Column 1 </th>
<th> Column 2 </th>
<th> Column 3 </th>
<th> Column 4 </th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="record"></td>
<td>
<input id='column1'>
</input>
</td>
<td><input id="column2">
</input></td>
<td>
<input id="column3">
</input>
</td>
<td>
<input id="4">
</input>
</td>
</tr>
<tr>
<td>
<button style="margin: 1%" class="add-record">add Record</button>
</td>
<td>
<button class="delete-component" style="margin: 1%">Delete Table </button>
</td>
<td>
<button class="delete-record" style="margin: 1%">Delete Record </button>
</td>
</tr>
</tbody>
</table>
<div class="generate-div" id="main-div"></div>
jsFiddle - >https://jsfiddle.net/shreekantbatale2/h2sv1q9p/

You've done the work of creating the new tr in memory. All you need to do is add it to the DOM. This can be achieved using appendTo():
$('#main-div').on('click', '.add-record', function() {
let $tbody = $(this).closest('tbody');
$('<tr>')
.append($('<td>').append('input'))
.append($('<td>').append('text2'))
.append($('<td>').append('text3'))
.append($('<td>').append('text4'))
.appendTo($tbody);
});
// ==================== //
// Add aggregate Table//
// ==================== //
var aggTableNum = 0;
$('.addAggregatorCompo').click(function(e) {
const originTable = document.getElementById('aggregator-table');
let newTable = originTable.cloneNode(true);
newTable.id = 'newAggTable' + ++aggTableNum;
newTable.querySelectorAll('input').forEach((element) => {
element.value = '';
});
$('#main-div').append(newTable);
});
// ==================== //
// Delete Component //
// ==================== //
$('#main-div').on('click', '.delete-component', function(e) {
e.preventDefault(); // in case it is not a type=button and the table is wrapped in a form
this.closest('table').remove();
});
// ==================== //
// Delete Records//
// ==================== //
$('#main-div').on('click', '.delete-record', function() {
$('table tbody')
.find('input[name="record"]')
.each(function() {
if ($(this).is(':checked')) {
$(this).parents('tr').remove();
}
});
});
// ==================== //
// Add Aggregate records //
// ==================== //
$('#main-div').on('click', '.add-record', function() {
let $tbody = $(this).closest('table').find('tbody');
$('<tr>')
.append($('<td>').append('input'))
.append($('<td>').append('text2'))
.append($('<td>').append('text3'))
.append($('<td>').append('text4'))
.appendTo($tbody);
});
#aggregator-table {
display: none;
}
table {
border-collapse: collapse;
margin: 1em;
}
thead {
background-color: lightblue;
}
td,
th {
border: solid grey 1px;
padding: 1em;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button style="margin: 1%" class="addAggregatorCompo">Add Table</button>
<table id="aggregator-table" class="component-base">
<thead>
<th colspan="6">Aggregator</th>
<tr>
<th>Select</th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="record"></td>
<td><input id="column1" /></td>
<td><input id="column2" /></td>
<td><input id="column3" /></td>
<td><input id="4" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<button style="margin: 1%" class="add-record">add Properties</button>
</td>
<td>
<button class="delete-component" style="margin: 1%">Delete Table </button>
</td>
<td>
<button class="delete-record" style="margin: 1%">Delete Record </button>
</td>
</tr>
</tfoot>
</table>
<div class="generate-div" id="main-div"></div>
Also note in your HTML that <input /> elements do not have a closing tag.

How to get an image when you click on text in a table

In javascript I created a table and now i when i click on data inside the table I want an image to appear. I am new to coding so somehow i am unable to figure out a solution to this problem.
This is my webpage I would like to add an image when someone clicks on data inside the webpage and then an image should show up next to the names column
<html>
<head>
<title>My homepage</title>
<style>
body { background-color: coral;
font-family: vernada;
}
table { border: 3px solid white;
border-collapse: collapse;
width: 75%;
}
div {
background-color: yellow;
padding: 200px;
display: none;
}
td, th { border: 3px solid white;
font-family: helvetta;
}
tr:nth-child(even){
background-color:blue;
}
tr:hover {
background-color:gray;
}
span:hover + div {
display: block;
</style>
<body>
Employee First Name:<input type="text" name="efname" id="fname"><br><br>
Employee Last Name:<input type="text" name="elname" id="lname"><br><br>
Age:<input type="text" name="age" id="age"><br><br>
<table id = "table">
<tr>
<th>Employee First Name</th>
<th>Employee Last Name</th>
<th> age</th>
</tr>
<span>
<tr>
<div> Leo Dicaprio is 50 years old </div>
<td>Leo</td>
<td>DiCaprio</td>
<td>50</td>
</tr>
</span>
<span>
<tr>
<div> Jill smith is 50 years old </div>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</span>
<span>
<tr>
<div> Eve jackson is 94 years old</div>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</span>
<span>
<tr>
<div> John Doe is 80 years old</div>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</span>
</table>
<button onclick="myfunction()">Add data</button>
<input type = "image" src = addimage()>
<script>
var table = document.getElementById('table');
for(var i = 1; i < table.rows.length; i++)
{
table.rows[i].onclick = function()
{
document.getElementById("fname").value = this.cells[0].innerHTML;
document.getElementById("lname").value = this.cells[1].innerHTML;
document.getElementById("age").value = this.cells[2].innerHTML;
}
}
function myfunction() {
var table = document.getElementById('table');
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML=(document.getElementById("fname").value);
cell2.innerHTML=(document.getElementById("lname").value);
cell3.innerHTML=(document.getElementById("age").value);
}
</script>
</body>
</html>

datepicker not working on cloned rows

i found this zebra datepicker but my problem is that dates are not functional on cloned rows ... here is my fiddle code:
html
<DIV id="mainContent_pnlEmploymentHistory">
<form id="form1" name="form1" method="post" action="value.php">
<TABLE id="dataTable">
<TBODY>
<TR>
<TD style="width: 310px; height: 20px; text-align: center;">Name of Employer</TD>
<TD style="width: 430px; height: 20px; text-align: center;"> Employer Address</TD>
<TD style="width: 150px; height: 20px; text-align: center;">FROM</TD>
<TD style="width: 150px; height: 20px; text-align: center;">TO</TD></TR>
<TR class="row_to_clone_fw_emp">
<TD style="width: 310px; height: 20px; text-align: center;">
<input type="text" id="fwemployer" name="fwemployer[]" style="width:300px"/>
</TD>
<TD style="width: 430px; height: 20px; text-align: center;">
<input type="text" id="fwempaddress" name="fwempaddress[]" style="width:100%"/></TD>
<TD>
<input id="datepicker-example7-start" type="text" name="datefrom[]"/></TD>
<TD>
<input id="datepicker-example7-end" type="text" name="dateto[]"/></TD>
</TR>
</TBODY>
</TABLE>
<table>
<tr>
<td colspan="3" align="right"><INPUT type="button" value="Add Row" id="addrow" onclick="addRowfwemp(); return false;"/></td>
<td colspan="4" align="right"><input type="submit" name="Submit" value="Submit" /></td>
</tr>
</table>
</form>
</DIV>
javascript
$(document).ready(function() {
$('#datepicker-example7-start').Zebra_DatePicker({
direction: false,
pair: $('#datepicker-example7-end')
});
$('#datepicker-example7-end').Zebra_DatePicker({
direction: true
});
});
$(document).ready(function(){
$( "#addrow" ).click(function() {
var zdp = $('#datepicker-example7-start').data('Zebra_DatePicker');
var zdp1 = $('#datepicker-example7-end').data('Zebra_DatePicker');
zdp.destroy();
zdp1.destroy();
});
});
function addRowfwemp() {
/* Declare variables */
var elements, templateRow, rowCount, row, className, newRow, element;
var i, s, t;
/* Get and count all "tr" elements with class="row". The last one will
* be serve as a template. */
if (!document.getElementsByTagName)
return false; /* DOM not supported */
elements = document.getElementsByTagName("tr");
templateRow = null;
rowCount = 0;
for (i = 0; i < elements.length; i++) {
row = elements.item(i);
/* Get the "class" attribute of the row. */
className = null;
if (row.getAttribute)
className = row.getAttribute('class');
if (className === null && row.attributes) { // MSIE 5
/* getAttribute('class') always returns null on MSIE 5, and
* row.attributes doesn't work on Firefox 1.0. Go figure. */
className = row.attributes['class'];
if (className && typeof(className) === 'object' && className.value) {
// MSIE 6
className = className.value;
}
}
/* This is not one of the rows we're looking for. Move along. */
if (className !== "row_to_clone_fw_emp")
continue;
/* This *is* a row we're looking for. */
templateRow = row;
rowCount++;
}
if (templateRow === null)
return false; /* Couldn't find a template row. */
/* Make a copy of the template row */
newRow = templateRow.cloneNode(true);
/* Change the form variables e.g. price[x] -> price[rowCount] */
elements = newRow.getElementsByTagName("input");
for (i = 0; i < elements.length; i++) {
element = elements.item(i);
s = null;
s = element.getAttribute("name");
if (s === null)
continue;
t = s.split("[");
if (t.length < 2)
continue;
s = t[0] + "[" + rowCount.toString() + "]";
element.setAttribute("name", s);
element.value = "";
}
/* Add the newly-created row to the table */
templateRow.parentNode.appendChild(newRow);
return true;
}
http://jsfiddle.net/jakecruz011/ZvsZm/ ... it might be a little broken since i cant upload all external resources but definitely the cloning methods and how datepicker is called is in there ...
the original code can be found here (exxample 7): http://stefangabos.ro/jquery/zebra-datepicker/
files on github is downloadable here: https://github.com/stefangabos/Zebra_Datepicker/
thanks so much for the help! would be much appreciated ...

You need to call the datepicker function again, after append the new elements to DOM
I would suggest you to add a common class for the datepicker input fields.
<TD>
<input id="datepicker-example7-start" type="text" name="datefrom[]" class="dp-start"/>
</TD>
<TD>
<input id="datepicker-example7-end" type="text" name="dateto[]" class="dp-end"/>
</TD>
and call the datepicker function like this just after append the new row.
$('.dp-start:last').Zebra_DatePicker({
direction: false,
pair: $('.dp-end:last')
});
$('.dp-end:last').Zebra_DatePicker({
direction: true
});
I have not tried this. Hope it will work.