Table

Developer
Kevin Corcoran
Size
3,785 Kb
Views
12,144
  1. Table Previews
  2. Table HTML Codes
  3. Table CSS Codes
  4. Table JS Codes

How do I make an table?

What is a table? How do you make a table? This script and codes were developed by Kevin Corcoran on 22 November 2022, Tuesday.

Table Previews
IQ Test

Table - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>table</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body onload="calcFinalGrades();"> <div id="parent"> <table class="table" onkeyup="calcFinalGrades();" onkeydown="emptyCell();"> <thead class="header"> <tr> <th>ID</th> <th>Name</th> <th>Assignment 1</th> <th>Assignment 2</th> <th>Assignment 3</th> <th>Assignment 4</th> <th>Assignment 5</th> <th>Final Grade</th> </tr> </thead> <tbody id="tbody" class="body"> <tr> <td>15984762</td> <td>Maurice Moss</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>13265498</td> <td>Roy Trenneman</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>13025687</td> <td>Jen Barber</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>15600285</td> <td>Peter File</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>16543265</td> <td>Douglas Reynholm</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>10298374</td> <td>Richmond Avenal</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>14502035</td> <td>Denholm Reynholm</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>05147292</td> <td>Fr. Ted Crilly</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>15898764</td> <td>Fr. Dougal Maguire</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>23458974</td> <td>Fr. Jack Hackett</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> <br> <div id="child"> <btn class="btn" onclick="avgGrade();">Calculate Final Grades</btn> <br> <br> <div class="unSubAsn">Unsubmitted Assignments: <span></span></div> <br> <btn id="gCSV" class="btn" onclick="CSV();">Show CSV</btn> <br> <textarea readonly class="csv"></textarea> </div> </div>
</body> <script src="js/index.js"></script>
</body>
</html>

Table - Script Codes CSS Codes

/*unsubmitted assignments design*/
.unSubAsn { font-family: Sans-Serif; color: #6d6d6d; font-size: 20px; background-color: yellow; border-radius: 7px; margin: auto; width: 300px; border: 1px solid #6d6d6d; padding: 5px 0px 5px 0px;
}
/*csv display design*/
.csv { visibility: hidden; font-family: sans-serif; text-align: left; min-height: 170px; min-width: 400px; margin: 25px auto; border: 2px #2d2d2d; border-bottom: 2px solid #00cccc; box-shadow: 0px 0px 20px rgba(0, 0, 0, 1), 0px 10px 20px rgba(0, 0, 0, 0.05), 0px 20px 20px rgba(0, 0, 0, 0.05), 0px 30px 20px rgba(0, 0, 0, 0.05);
}
/*table borders*/
.table { width:auto; background: white; height:auto; border-bottom: 2px solid #2d2d2d; box-shadow: 0px 0px 20px rgba(0, 0, 0, 1), 0px 10px 20px rgba(0, 0, 0, 0.05), 0px 20px 20px rgba(0, 0, 0, 0.05), 0px 30px 20px rgba(0, 0, 0, 0.05); border-collapse: collapse; border-spacing: 0; }
/*data cell design*/
.table td { text-align:left; font-family: sans-serif; font-size: 14px; padding: 10px 5px; overflow: hidde; word-break: normal; border: 3px solid #2d2d2d;
}
/*header design*/
.table th { border: 3px solid #2d2d2d; font-family: sans-serif; background-color:#6d6d6d; font-size: 14px; padding: 10px 5px; overflow: hidden; word-break: normal;
}
/*right align numbers*/
td:nth-child(n+3) { text-align: right;
}
/*button design*/
.btn { background: #2d2d2d; background-image: -webkit-linear-gradient(top, #2d2d2d, #2d2d2d); background-image: -moz-linear-gradient(top, #2d2d2d, #2d2d2d); background-image: -ms-linear-gradient(top, #2d2d2d, #2d2d2d); background-image: -o-linear-gradient(top, #2d2d2d, #2d2d2d); background-image: linear-gradient(to bottom, #2d2d2d, #2d2d2d); -webkit-border-radius: 7; -moz-border-radius: 7; border-radius: 7px; font-family: sans-serif; color: #6d6d6d; font-size: 20px; padding: 5px 20px 5px 20px; text-decoration: none;
}
/*button behaviour*/
.btn:hover { background: #a8a8a8; text-decoration: none; cursor: pointer;
}
/*alignment*/
#parent { display: table; text-align: center; /* position: relative;*/
}
#child { margin: auto; padding: 10px; position: relative
}

Table - Script Codes JS Codes

//on button click update and showhide
CSV = function(){ var btn = document.getElementById("gCSV"); var csv = document.querySelector(".csv"); if (btn.innerHTML.toString() == "Hide CSV") {//no need to regenerate since it will be hidden btn.innerHTML = "Show CSV"; csv.style.visibility = "hidden"; } else {	generateCSV();//generates csv data upon show, not completely necessary since it will be done automatically btn.innerHTML = "Hide CSV"; csv.style.visibility = "visible"; }
} //Empty a cell for input
emptyCell = function() { var cell = document.querySelector("td:focus");//selected cell if (cell.innerHTML == '-') {//if it is already null empty it to allow input cell.innerHTML = null; var numUnSub = document.querySelector("div div div span"); numUnSub.innerHTML--;//decrement number of unsubmitted assignments } } //calculate all the averages
calcFinalGrades = function() { var numUnSub = document.querySelector("div div div span"); numUnSub.innerHTML = null;//reset every call var finalGrades = document.querySelectorAll("td:last-child");//final grades column var data = document.querySelectorAll("td:nth-child(3), td:nth-child(4), td:nth-child(5), td:nth-child(6), td:nth-child(7)");//assignments column var fG = 0;//final grade row var numAssignment = data.length / finalGrades.length;//amount of assignments var sum = 0; for (i = 0; i <= data.length; i++) { if ((i != 0) && (((i) % numAssignment) == 0)) { finalGrades[fG].innerHTML = Math.round(sum / numAssignment); passCheck(finalGrades, fG); finalGrades[fG].innerHTML += '%'; sum = 0; fG++; finalGrades[fG].innerHTML = 0; } if (verifyInput(data, i)) { sum += parseFloat(data[i].innerHTML); } data[i].contentEditable = true; if(i==data.length-1){	generateCSV(); } } } //check if the student has passed and if not style the cell red etc
passCheck = function(finalGrades, fG) { if (finalGrades[fG].innerHTML < 40) { finalGrades[fG].style.backgroundColor = "red"; finalGrades[fG].style.color = "white"; finalGrades[fG].style.borderColor = "#2d2d2d" } else{	finalGrades[fG].style.backgroundColor = "white"; finalGrades[fG].style.color = "black"; finalGrades[fG].style.borderColor = "#2d2d2d" } } //verify that the input is between 0 and 100
verifyInput = function(data, i) { if ((data[i].innerHTML >= 0) && (data[i].innerHTML <= 100) && (data[i].innerHTML != '')) { data[i].style.backgroundColor = "white"; return parseFloat(data[i].innerHTML); } else { unSubCell(data, i);//default to unsubmitted assignment return 0; } } //style an unsubmitted assignment cell and increment a count of such cells
unSubCell = function(data, i) { data[i].innerHTML = '-'; data[i].style.backgroundColor = "yellow"; var numUnSub = document.querySelector("div div div span"); numUnSub.innerHTML++; }
//generate csv
generateCSV = function() { var table = document.querySelectorAll("tbody tr td"); var csv = document.querySelector(".csv"); // csv.style.visibility = "visible"; csv.style.width = "auto"; csv.innerHTML = null; for (var value of table.values()) { if (value.innerHTML.endsWith("%")) { csv.innerHTML += value.innerHTML + "\n"; } else { csv.innerHTML += value.innerHTML + ","; } } }
Table - Script Codes
Table - Script Codes
Home Page Home
Developer Kevin Corcoran
Username kevincorcor
Uploaded November 22, 2022
Rating 3
Size 3,785 Kb
Views 12,144
Do you need developer help for Table?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kevin Corcoran (kevincorcor) Script Codes
Name
Q1.4i
Assign2
CS230
A Pen by kevin corcoran
Q1.4.iv
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!