I have simple html javascript code. creating a dynamic call when entering a number to do Onchange event and creating a dynamic table using createElement. addEventListener is called when createElement’s checkbox is checked. Now what I need is I have a textbox column next to checkbox. This textbox should be visible when checkbox is checked. I would appreciate if anyone could be helpful! Thank you so much for reading.
function displayDate(val) {
let thisrow = val.slice(-1)
let date = "date" + thisrow;
let thisDate = document.getElementById("date");
document.getElementById('thisDate').style.display = "";
}
function showTable(val) {
var tempNo = val;
if (tempNo != 0 || tempNo != null) {
var root = document.getElementById("thisDiv");
var table = document.createElement('table');
table.className = "toggleTable";
var tblB = document.createElement('tbody');
table.appendChild(tblB);
var rowcnt = val;
headerList = ["School", "Address", "Date"];
var tr = document.createElement('tr');
// Header row
for (var j = 0; j < 3; j++) {
var th = document.createElement('th'); //column
var text = document.createTextNode(headerList[j]); //cell
th.appendChild(text);
tr.appendChild(th);
}
tblB.appendChild(tr);
for (var i = 0; i < rowcnt; i++) {
var tr = document.createElement('tr');
tblB.appendChild(tr);
var td = document.createElement('td');
var school = "";
var address = "";
var date = "";
var curcolumn = i + 1;
school = curcolumn;
for (var j = 0; j < 4; j++) {
if (i >= 0 && j == 0) {
var input = document.createElement("input");
input.type = "text";
input.name = "school" + curcolumn;
input.value = school;
input.id = "school" + curcolumn;
const td = document.createElement('td');
td.appendChild(input);
tr.appendChild(td);
} else if (i >= 0 && j == 1) {
var input = document.createElement("input");
input.type = "checkbox";
input.name = "address" + curcolumn;
input.value = address;
input.id = "address" + curcolumn;
input.class = "dynamic";
input.addEventListener('click', function() {
displayDate(this.name); // logs the className of my_element
}, false);
const td = document.createElement('td');
td.appendChild(input);
tr.appendChild(td);
} else if (i >= 0 && j == 3) {
var input = document.createElement("input");
input.type = "text";
input.name = "date" + curcolumn;
input.value = date;
input.id = "date" + curcolumn;
input.style = "display:none";
const td = document.createElement('td');
td.appendChild(input);
tr.appendChild(td);
}
}
}
root.appendChild(table);
}
}
function onSavePressed() {
schoolCnt = document.getElementById('schoolCnt').value;
myData = "";
var schoolList = {};
for (var i = 1; i <= schoolCnt; i++) {
schoolList['school' + i] = document.getElementById('school' + i).value;
schoolList['address' + i] = document.getElementById('address' + i).value;
schoolList['date' + i] = document.getElementById('date' + i).value;
}
console.log(Object.values(schoolList));
myData = Object.values(schoolList);
var ext = ".txt";
var curFile = "Allschool";
var curFile = curFile.concat(ext);
console.log(schoolList);
}body {
margin-left: 240px;
margin-top: 50px;
}
table {
border-collapse: collapse;
}
td,
th {
border: 0px solid black;
padding: 10px;
height: 2px;
}
#label {
font-size: 14px;
text-align: right;
}
table.schoolTable {
margin: 10px 30px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
width: 600px;
border: 0px solid black;
}
.schoolTable input[type=text] {
font-size: 12px;
border: 1px solid #73AD21;
cursor: pointer;
font-family: verdana, arial, sans-serif;
font-size: 18px;
text-align: center;
width: 210px;
height: 30px;
}
.schoolTable input[type=checkbox] {
font-size: 25px;
border: 1px solid #73AD21;
cursor: pointer;
font-family: verdana, arial, sans-serif;
text-align: left;
height: 25px;
width: 80px;
}
.toggleTable {
width: 950px;
border-width: 1px;
padding: 1px;
border-style: solid;
border-color: #517994;
background-color: lightblue;
margin-left: 20px;
}
.toggleTable input[type=text] {
cursor: pointer;
font-family: verdana, arial, sans-serif;
font-size: 14px;
text-align: center;
height: 25px;
width: 100%;
}
.toggleTable input[type=checkbox] {
cursor: pointer;
font-family: verdana, arial, sans-serif;
font-size: 14px;
text-align: left;
height: 25px;
width: 80%;
}
.toggleTable td {
font-size: 14px;
border: 0px solid #73AD21;
}
.toggleTable th {
width: 5%;
font-size: 13px;
}
.hide {
display: none;
}<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<form name="myform" id="my_form">
<table class="schoolTable">
<h1 style="font-weight:bold;color:blue;font-size:18px;text-align:left;"> School </h1>
<tr>
<th id="label">School Count :</th>
<td><input type="text" id="schoolCnt" onChange = "showTable(this.value)" ></td>
</tr>
</table>
<br>
<div id="thisDiv" style="visibility:visible;"></div>
<br> <br>
<table style="margin-left:40px">
<tr>
<td>
<input type="submit" value = "SaveToDB" onclick="onSavePressed()" style="font-weight:bold;color:green;font-size:18px";>
</td>
</tr>
</td>
</tr>
</table>
</form>
.
