Im trying to apply some conditional formatting on a html script. I currently have it 4 different tables, with the first 2 stacked on top of each other, and the bottom two side by side at the bottom. I have a color conditional formatting to where for the first two tables, it is only applied to the last 2 columns. For the last table, I have it applied for all but the first column. I am trying to apply the conditional formatting on the last table (all but first column), but it keeps applying the formatting of the first 2 columns.
<html>
<head>
<script>
setTimeout(function(){
location.reload();
}, 10000);
function changeColor() {
var tables = document.querySelectorAll("table");
for (var i = 0; i < tables.length - 2; i++) {
var rows = tables[i].querySelectorAll("tr");
for (var j = 1; j < rows.length; j++) { // start from the second row (index 1)
var cells = rows[j].querySelectorAll("td:nth-child(n+5)");
for (var k = 0; k < cells.length; k++) {
if (cells[k].innerHTML !== "") {
if (cells[k].innerHTML > 0) {
cells[k].style.backgroundColor = "rgba(144, 238, 144, 0.5)";
} else {
cells[k].style.backgroundColor = "rgba(240, 128, 128, 0.5)";
}
}
}
}
}
var rows = tables[tables.length - 2].querySelectorAll("tr");
for (var j = 1; j < rows.length; j++) { // start from the second row (index 1)
var cells = rows[j].querySelectorAll("td");
for (var k = 0; k < cells.length; k++) {
if (k === 0) continue; // skip the first column
if (cells[k].innerHTML !== "") {
if (cells[k].innerHTML > 0) {
cells[k].style.backgroundColor = "rgba(144, 238, 144, 0.5)";
} else {
cells[k].style.backgroundColor = "rgba(240, 128, 128, 0.5)";
}
}
}
}
var rows = tables[tables.length - 1].querySelectorAll("tr");
for (var j = 1; j < rows.length; j++) { // start from the second row (index 1)
var cells = rows[j].querySelectorAll("td");
for (var k = 0; k < cells.length; k++) {
if (k === 0) continue; // skip the first column
if (cells[k].innerHTML !== "") {
if (cells[k].innerHTML > 0) {
cells[k].style.backgroundColor = "rgba(144, 238, 144, 0.5)";
} else {
cells[k].style.backgroundColor = "rgba(240, 128, 128, 0.5)";
}
}
}
}
}
window.onload = changeColor;
</script>
<style>
body {
background-color: #333;
color: white;
}
table {
display: block;
border-collapse: collapse;
}
td, th {
border: 1px solid white;
padding: 8px;
}
th {
background-color: #666
font-size: 12px;
font-weight: bold;
}
td {
text-align: center;
font-size: 10px;
}
</style>
</head>
</head>
<body>
<table>
{{ df1_html }}
</table>
<br><br>
<table>
{{ df2_html }}
</table>
<br><br>
<div style="display: flex;">
<div style="flex: 1; padding-right: 10px;">
<div class="table-title">ISONE HDD Delta</div>
<table>
{{ df3_html }}
</table>
</div>
<div style="flex: 1; padding-left: 10px;">
<div class="table-title">NYISO HDD Delta</div>
<table>
{{ df4_html }}
</table>
</div>
</div>
</body>
</html>```
I have tried adjusting the boundaries on the formatting, but nothing seems to change it. I am expecting table 3 and 4 to have the color conditional formatting applied to all but the first column.
Related
So far i only can achieve to this point. I am using example code from w3school
I trying to figure out to get year in the same position like in the picture but no luck and also tried to insert image background for circle but only manage to color fill
/* The actual timeline (the vertical ruler) */
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
/* The actual timeline (the vertical ruler) */
.timeline::after {
content: ' ';
position: absolute;
width: 6px;
background-color: #ffc200;
top: 0;
bottom: 0;
left: 50%;
margin-left: -5px;
}
/* Container around content */
.contaiment {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
/* The circles on the timeline */
.contaiment::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -11px;
background-color: #ffc200;
border: 4px solid #ffc200;
top: 15px;
border-radius: 50%;
z-index: 1;
}
/* Place the container to the left */
.left {
left: 0;
}
/* Place the container to the right */
.right {
left: 50%;
}
/* Add arrows to the left container (pointing right) */
/* .left::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
} */
/* Add arrows to the right container (pointing left) */
.right::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Fix the circle for containers on the right side */
.right::after {
left: -16px;
}
/* The actual content */
.content {
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 6px;
}
<div class="timeline">
<div class="contaiment left">
<div class="content">
<p>2017
<p>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="contaiment right">
<div class="content">
<p class="">2017
<p>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="contaiment left">
<div class="content">
<p class="">2017
<p>
<p>Lorem ipsum..</p>
</div>
</div>
</div>
I know you want to do something with only HTML and CSS, but take a look at this JQuery library. It's very easy to use.
https://github.com/musclesoft/jquery-connections/wiki/API
You just need to set the 2 elements you want to connect.
$("#div1, #div2").connections();
$("#div2, #div3").connections();
$("#div3, #div4").connections();
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<title>Hello, world!</title>
</head>
<body>
<p style="width: 50px;height: 50px;border: 1px solid black;" id="div1">TEST</p>
<p style="width: 50px;height: 50px;margin-left: 50px;border: 1px solid black;" id="div2">TEST</p>
<p style="width: 50px;height: 50px;margin-left: 200px;border: 1px solid black;" id="div3">TEST</p>
<p style="width: 50px;height: 50px;margin-left: 300px;border: 1px solid black;" id="div4">TEST</p>
<!-- Script retrieved from https://raw.githubusercontent.com/musclesoft/jquery-connections/gh-pages/jquery.connections.js -->
<script>
(function($) {
$.fn.connections = function(options) {
if (options === "update") {
return processConnections(update, this);
} else if (options === "remove") {
return processConnections(destroy, this);
} else {
options = $.extend(
true,
{
borderClasses: {},
class: "connection",
css: {},
from: this,
tag: "connection",
to: this,
within: ":root"
},
options
);
connect(options);
return this;
}
};
$.event.special.connections = {
teardown: function(namespaces) {
processConnections(destroy, $(this));
}
};
var connect = function(options) {
var borderClasses = options.borderClasses;
var tag = options.tag;
var end1 = $(options.from);
var end2 = $(options.to);
var within = $(options.within);
delete options.borderClasses;
delete options.tag;
delete options.from;
delete options.to;
delete options.within;
within.each(function() {
var container = this;
var done = new Array();
end1.each(function() {
var node = this;
done.push(this);
end2.not(done).each(function() {
createConnection(
container,
[node, this],
tag,
borderClasses,
options
);
});
});
});
};
var createConnection = function(
container,
nodes,
tag,
borderClasses,
options
) {
var css = $.extend({ position: "absolute" }, options.css);
var connection = $("<" + tag + "/>", options).css(css);
connection.appendTo(container);
var border_w = (connection.outerWidth() - connection.innerWidth()) / 2;
var border_h = (connection.outerHeight() - connection.innerHeight()) / 2;
if (border_w <= 0 && border_h <= 0) {
border_w = border_h = 1;
}
var data = {
borderClasses: borderClasses,
border_h: border_h,
border_w: border_w,
node_from: $(nodes[0]),
node_to: $(nodes[1]),
nodes_dom: nodes,
css: css
};
if ("none" === connection.css("border-top-style")) {
data.css.borderStyle = "solid";
}
$.data(connection.get(0), "connection", data);
$.data(connection.get(0), "connections", [connection.get(0)]);
for (var i = 0; i < 2; i++) {
var connections = connection.add($.data(nodes[i], "connections")).get();
$.data(nodes[i], "connections", connections);
if (connections.length == 1) {
$(nodes[i]).on("connections.connections", false);
}
}
update(connection.get(0));
};
var destroy = function(connection) {
var nodes = $.data(connection, "connection").nodes_dom;
for (var i = 0; i < 2; i++) {
var connections = $($.data(nodes[i], "connections"))
.not(connection)
.get();
$.data(nodes[i], "connections", connections);
}
$(connection).remove();
};
var getState = function(data) {
data.rect_from = data.nodes_dom[0].getBoundingClientRect();
data.rect_to = data.nodes_dom[1].getBoundingClientRect();
var cached = data.cache;
data.cache = [
data.rect_from.top,
data.rect_from.right,
data.rect_from.bottom,
data.rect_from.left,
data.rect_to.top,
data.rect_to.right,
data.rect_to.bottom,
data.rect_to.left
];
data.hidden =
0 === (data.cache[0] | data.cache[1] | data.cache[2] | data.cache[3]) ||
0 === (data.cache[4] | data.cache[5] | data.cache[6] | data.cache[7]);
data.unmodified = true;
if (cached === undefined) {
return (data.unmodified = false);
}
for (var i = 0; i < 8; i++) {
if (cached[i] !== data.cache[i]) {
return (data.unmodified = false);
}
}
};
var update = function(connection) {
var data = $.data(connection, "connection");
getState(data);
if (data.unmodified) {
return;
}
var border_h = data.border_h;
var border_w = data.border_w;
var from = data.rect_from;
var to = data.rect_to;
var b = (from.bottom + from.top) / 2;
var r = (to.left + to.right) / 2;
var t = (to.bottom + to.top) / 2;
var l = (from.left + from.right) / 2;
var h = ["right", "left"];
if (l > r) {
h = ["left", "right"];
var x = Math.max(r - border_w / 2, Math.min(from.right, to.right));
r = l + border_w / 2;
l = x;
} else {
l -= border_w / 2;
r = Math.min(r + border_w / 2, Math.max(from.left, to.left));
}
var v = ["bottom", "top"];
if (t > b) {
v = ["top", "bottom"];
var x = Math.max(b - border_h / 2, Math.min(from.bottom, to.bottom));
b = t + border_h / 2;
t = x;
} else {
b = Math.min(b, Math.max(from.top, to.top));
t -= border_h / 2;
}
var width = r - l;
var height = b - t;
if (width < border_w) {
t = Math.max(t, Math.min(from.bottom, to.bottom));
b = Math.min(b, Math.max(from.top, to.top));
l = Math.max(from.left, to.left);
r = Math.min(from.right, to.right);
r = l = (l + r - border_w) / 2;
}
if (height < border_h) {
l = Math.max(l, Math.min(from.right, to.right));
r = Math.min(r, Math.max(from.left, to.left));
t = Math.max(from.top, to.top);
b = Math.min(from.bottom, to.bottom);
b = t = (t + b - border_h) / 2;
}
width = r - l;
height = b - t;
width <= 0 && (border_h = 0);
height <= 0 && (border_w = 0);
var style =
"border-" +
v[0] +
"-" +
h[0] +
"-radius: 0;" +
"border-" +
v[0] +
"-" +
h[1] +
"-radius: 0;" +
"border-" +
v[1] +
"-" +
h[0] +
"-radius: 0;";
(border_h <= 0 || border_w <= 0) &&
(style += "border-" + v[1] + "-" + h[1] + "-radius: 0;");
if (data.hidden) {
style += "display: none;";
} else {
data.css["border-" + v[0] + "-width"] = 0;
data.css["border-" + h[0] + "-width"] = 0;
data.css["border-" + v[1] + "-width"] = border_h;
data.css["border-" + h[1] + "-width"] = border_w;
var current_rect = connection.getBoundingClientRect();
data.css.left = connection.offsetLeft + l - current_rect.left;
data.css.top = connection.offsetTop + t - current_rect.top;
data.css.width = width - border_w;
data.css.height = height - border_h;
}
var bc = data.borderClasses;
$(connection)
.removeClass(bc[v[0]])
.removeClass(bc[h[0]])
.addClass(bc[v[1]])
.addClass(bc[h[1]])
.attr("style", style)
.css(data.css);
};
var processConnections = function(method, elements) {
return elements.each(function() {
var connections = $.data(this, "connections");
if (connections instanceof Array) {
for (var i = 0, len = connections.length; i < len; i++) {
method(connections[i]);
}
}
});
};
})(jQuery);
</script>
<script defer type="text/javascript">
$("#div1, #div2").connections();
$("#div2, #div3").connections();
$("#div3, #div4").connections();
</script>
</body>
</html>
I'd like every other row in this table to stick to the left but also scroll up and down with the table. This solution forces every other row to stick in place fixed, so it works left to right, but not up and down.
I've tried a few other css methods like sticky, but to no avail.
I don't like the jquery solutions as they seem to be jittery and so I'd like a pure css solution if it is possible.
for (var i = 0; i <100; i++){
var k = 0
for (var j = 0; j <100; j++){
if (k == 0){
var tr = table.insertRow(-1);
tr.style.left = 0
tr.style.right = 0
var tabCell = tr.insertCell(-1);
tabCell.colSpan = "100"
tabCell.style = "height:44px;"
div = document.createElement("div")
div.setAttribute("class","stickyDiv")
div.innerHTML = "entity " + i
tabCell.appendChild(div)
k++
}
if(k != 0){
if(k == 1){
var tr = table.insertRow(-1);
}
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = "Column" + j
k++
}
}
}
table, th, td {
border: 1px solid black;
}
.stickyDiv{
display: inline-block;
position: fixed;
transform: translateY(-50%);
background-color:aliceblue
}
<body>
<table id = "table" style="height:100%;width:100%;">
</table>
</body>
I have a Google Sheet with about six hundred rows of data. I want to be able to display and filter this spreadsheet as an HTML table and have it displayed to a Google Site. I have found this code online along with the 'Display' HTML which I have used.
However when I publish as a web app, I am only seeing the outline of my table but with no data in the rows. The outline of my table looks correct and contains the search filters I need, however there is no data appearing in the table.
Is there an issue with the code below?
function myFunction() {
}function doGet(e){
var SHEET_ID=e.parameter.sheet_id
var html=HtmlService.createTemplateFromFile('Display')
var ss=SpreadsheetApp.openById('My Google Sheet ID')
var sheet=ss.getSheetByName('Sheet2')
html.data=getRowsData(sheet,sheet.getDataRange(),1)
return html.evaluate().setTitle('Log')
Logger.log(getRowsData(sheet,sheet.getDataRange(),1))
}
function include(filename){
return HtmlService.createHtmlOutputFromFile(filename).getContent()
}
function getRowsData(sheet, range, columnHeadersRowIndex){
columnHeadersRowIndex = columnHeadersRowIndex || range.getRowIndex()-1;
var numColumns = range.getEndColumn() - range.getColumn() + 1;
var headersRange = sheet.getRange(columnHeadersRowIndex, range.getColumn(), 1,
numColumns);
var headers = headersRange.getValues()[0];
return getObjects(range.getValues(),normalizeHeaders(headers));
}
function getObjects(data, keys) {
var objects = [];
for (var i = 0; i < data.length; ++i) {
var object = {};
var hasData = false;
for (var j = 0; j < data[i].length; ++j) {
var cellData = data[i][j];
if (isCellEmpty(cellData)) {
continue;
}
object[keys[j]] = cellData;
hasData = true;
}
if (hasData) {
objects.push(object);
}
}
return objects;
}
function normalizeHeaders(headers) {
var keys = [];
for (var i = 0; i < headers.length; ++i) {
var key = normalizeHeader(headers[i]);
if (key.length > 0) {
keys.push(key);
}
}
return keys;
}
function normalizeHeader(header) {
var key ='';
var upperCase = false;
for (var i = 0; i < header.length; ++i) {
var letter = header[i];
if (letter == '' && key.length > 0) {
upperCase = true;
continue;
}
if (!isAlnum(letter)) {
continue;
}
if (key.length == 0 && isDigit(letter)) {
continue; // first character must be a letter
}
if (upperCase) {
upperCase = false;
key += letter.toUpperCase();
} else {
key += letter.toLowerCase();
}
}
return key;
}
function isAlnum(char) {
return char >= 'A' && char <= 'Z' ||
char >= 'a' && char <= 'z' ||
isDigit(char);
}
function isDigit(char) {
return char >= '0' && char <= '9';
}
function isCellEmpty(cellData) {
return typeof(cellData) == 'string' && cellData == '';
}
Display.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!=include('Style')?>
</head>
<body>
<p></p>
<table id="dataTable" border="1" cellpadding="2" cellspacing="0">
<th width="10%">Employee Number</th>
<th width="15%">Name</th>
<th width="15%">Surname</th>
<th width="15%">EmpNo</th>
<th width="10%">Title</th>
<th width="15%">Div</th>
<th width="10%">Office</th>
<th width="10%">Form</th>
<tr>
<td bgcolor="#eb8c00" align="center"><input type="text"
id="EmployeeNumberSearchBox" onkeyup="SearchFunc()"
placeholder="EmployeeNumber..." width="30"></td>
<td bgcolor="#eb8c00" align="center"><input type="text"
id="NameSearchBox"
onkeyup="SearchFunc()" placeholder="Name..." width="35"></td>
<td bgcolor="#eb8c00" align="center"><input type="text" id="SurnameSearchBox"
onkeyup="SearchFunc()" placeholder="Surname..." width="35"></td>
<td bgcolor="#eb8c00" align="center"><input type="text" id="EmpNoSearchBox"
onkeyup="SearchFunc()" placeholder="EmpNo..." width="35"></td>
<td bgcolor="#eb8c00" align="center"><input type="text" id="TitleSearchBox"
onkeyup="SearchFunc()" placeholder="Title..." width="35"></td>
<td bgcolor="#eb8c00" align="center">
<select id="Div" onchange="SearchFunc();">
<option value="">Div...</option>
<option value="DOO">DOO</option>
<option value="PIT">PIT</option>
<option value="FID">FID</option>
<option value="FIS">FIS</option>
<option value="General">General</option>
<option value="Other">Other</option>
<option value="IS">IS</option>
<option value="SAS">SAS</option>
</select>
</td>
<td bgcolor="#eb8c00" align="center">
<select id="Office" onchange="SearchFunc();">
<option value="">Office...</option>
<option value="London">London</option>
<option value="New York">New York</option>
<option value="Berlin">Berlin</option>
<option value="Eindhoven">Eindhoven</option>
<option value="Lille">Lille</option>
<option value="Vienna">Vienna</option>
<option value="Copenhagen">Copenhagen</option>
</select>
</td>
<td bgcolor="#eb8c00" align="center"></td>
</tr>
<? for (var i=1;i<data.length;i++) {?>
<tr style="height:15px;">
<td align="center"><?=data[i]['Employee Number']?> </td>
<td align="left"><?=data[i]['Div']?> </td>
<td align="center"><?=data[i]['EmpNo']?> </td>
<td align="center"><?=data[i]['Name']?> </td>
<td align="center"><?=data[i]['Surname']?> </td>
<td align="center"><?=data[i]['Title']?> </td>
<td align="center"><?=data[i]['Office']?> </td>
<td align="center">
<a href="<?=data[i]['=ARRAYFORMULA(HYPERLINK(K1:K616, "Click here to complete
Access Form"))']?>" target="_blank"><button>Open Form</button>
</a>
</td>
</tr>
<? } ?>
</table>
</body>
</html>
Style.Html
<style>
input[type=text] {
font-size: 12px; /* Increase font-size */
padding: 12px 12px 12px 12px; /* Add some padding */
border: 1px solid #ddd; /* Add a grey border */
margin-bottom: 3px; /* Add some space below the input */
margin-top: 2px;
}
#EmployeeNumberSearchBox, #EmpNoSearchBox, #NameSearchBox,
#SurnameSearchBox, #OfficeSearchBox, #TitleSearchBox {
text-align:center;
width:50%;
}
#DivSearchBox{
text-align:center;
width:85%;
}
#dataTable {
border-collapse: collapse; /* Collapse borders */
width: 100%; /* Full-width */
border: 1px solid #ddd; /* Add a grey border */
font-size: 14px; /* Increase font-size */
table-layout: fixed;
}
#dataTable th{
text-align: center; /* Centre-align text */
background-color: #d04a02;
color: #ffffff
}
#dataTable td {
padding: 3px 5px 2px 10px;
}
#dataTable tr {
/* Add a bottom border to all table rows */
border-bottom: 1px solid #ddd;
}
button {
background-color: #464646;
border:none;
padding: 3px 5px 2px;
text-align: center;
display: inline-block;
font-size: 14px;
font-family: Helvetica Neue;
font-style: Bold;
color: white;
}
button:hover {
background-color: #eb8c00; /* Green */
color: white;
cursor:pointer;
}
select {
border: 0;
width: 100%;
height:35px;
text-align-last:center;
}
</style>
Java.html
<script>
function SearchFunc() {
var EmployeeNumberInput, DivInput, EmpNoInput, NameInput,
SurnameInput, OfficeInput, TitleInput,
EmployeeNumberFilter, DivFilter, EmpNoFilter, NameFilter,
SurnameFilter, OfficeFilter, TitleFilter,
table, tr, i,
EmployeeNumberValue, DivValue, EmpNoValue, NameValue,
SurnameValue, OfficeValue, TitleValue;
EmployeeNumberInput = document.getElementById("Employee Number");
DivInput = document.getElementById("Div");
EmpNoInput = document.getElementById("EmpNo");
NameInput = document.getElementById("Name");
SurnameInput = document.getElementById("Surname");
TitleInput = document.getElementById("Title");
OfficeInput = document.getElementById("Office");
EmployeeNumberFilter = EmployeeNumberInput.value.toUpperCase();
DivFilter = DivInput.value.toUpperCase();
EmpNoFilter = EmpNoInput.value.toUpperCase();
NameFilter = NameInput.value.toUpperCase();
SurnameFilter = SurnameInput.value.toUpperCase();
TitleFilter = TitleInput.value.toUpperCase();
OfficeFilter = OfficeInput.value.toUpperCase();
table = document.getElementById("dataTable");
tr = table.getElementsByTagName("tr");
for (i = 2; i < tr.length; i++) {
EmployeeNumberValue = tr[i].getElementsByTagName("td")[0];
DivValue = tr[i].getElementsByTagName("td")[1];
EmpNoValue = tr[i].getElementsByTagName("td")[2];
NameValue = tr[i].getElementsByTagName("td")[3];
SurnameValue = tr[i].getElementsByTagName("td")[4];
TitleValue = tr[i].getElementsByTagName("td")[5];
OfficeValue = tr[i].getElementsByTagName("td")[6];
if (EmployeeNumberValue) {
if (EmployeeNumberValue.textContent.toUpperCase().indexOf
(EmployeeNumberFilter) > -1
&&
DivValue.textContent.toUpperCase().indexOf(DivFilter) > -1
&&
EmpNoValue.textContent.toUpperCase().indexOf(EmpNoFilter) > -1
&&
NameValue.textContent.toUpperCase().indexOf(NameFilter) >
-1
&&
SurnameValue.textContent.toUpperCase().indexOf(SurnameFilter) > -1
&&
TitleValue.textContent.toUpperCase().indexOf(TitleFilter) > -1)
&&
OfficeValue.textContent.toUpperCase().indexOf(OfficeFilter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
function sortTable() {
var table, rows, switching, i, x, y, shouldSwitch;
table = document.getElementById("dataTable");
switching = true;
/* Make a loop that will continue until
no switching has been done: */
while (switching) {
// Start by saying: no switching is done:
switching = false;
rows = table.rows;
/* Loop through all table rows (except the
first, which contains table headers): */
for (i = 2; i < (rows.length - 1); i++) {
// Start by saying there should be no switching:
shouldSwitch = false;
/* Get the two elements you want to compare,
one from current row and one from the next: */
x = rows[i].getElementsByTagName("TD")[0];
y = rows[i + 1].getElementsByTagName("TD")[0];
// Check if the two rows should switch place:
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
// If so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
/* If a switch has been marked, make the switch
and mark that a switch has been done: */
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
}
}
}
</script>
Instead of <?= use <?!=
From https://developers.google.com/apps-script/guides/html/templates#force-printing_scriptlets
Force-printing scriptlets
Force-printing scriptlets, which use the syntax <?!= ... ?>, are like printing scriptlets except that they avoid contextual escaping.
Contextual escaping is important if your script allows untrusted user input. By contrast, you’ll need to force-print if your scriptlet’s output intentionally contains HTML or scripts that you want to insert exactly as specified.
As a general rule, use printing scriptlets rather than force-printing scriptlets unless you know that you need to print HTML or JavaScript unchanged.
Related
How to use scriptlets in HTMLOutput in Google Apps Script
var rows = 55;
var cols = 140;
var rowsInput = document.getElementById("rowsId");
var colsInput = document.getElementById("colsId");
//initialize 2dim arrays
var arr;// current generation array
var nextArr; // next generation array
function drawGrid() {
let grid = document.getElementById("container");
let table = document.createElement("table");
table.setAttribute("class", "center");
for (let i = 0; i < rows; i++) {
let tr = document.createElement("tr");
for (let j = 0; j < cols; j++) {
let cell = document.createElement("td");
cell.setAttribute("id", i + "_" + j);
cell.setAttribute("class", "dead");
tr.appendChild(cell);
cell.addEventListener("click", function () {
if (cell.classList.contains("live")) {
cell.setAttribute("class", "dead");
arr[i][j] = 0;
}
else
cell.setAttribute("class", "live");
arr[i][j] = 1;
});
}
table.appendChild(tr);
}
grid.appendChild(table);
}
function make2DArr() {
arr = new Array(rows);
nextArr = new Array(rows);
for (let i = 0; i < rows; i++) {
arr[i] = new Array(cols);
nextArr[i] = new Array(cols);
}
for (let i = 0; i < rows; i++) {
for (let j = 0; j < cols; j++) {
arr[i][j] = 0;
nextArr[i][j] = 0;
}
}
}
var generateBtn = document.getElementById("generateBtnId");
generateBtn.addEventListener("click", function () {
rows = rowsInput.value;
cols = colsInput.value;
remove();
make2DArr();
drawGrid();
});
function remove() {
var tb = document.querySelector("table");
tb.outerHTML = "";
}
function init() {
make2DArr();
drawGrid();
}
init();
body {
background-color: rgba(76, 77, 62, 0.514);
}
.center {
margin: auto;
width: 70rem;
height: 30rem;
padding: 0.5rem;
}
#container {
position: relative;
border:1px rgb(26, 51, 192) solid;
margin: 0;
overflow: auto;
display: flex;
}
table {
border:1px rgb(241, 241, 241) solid;
border-spacing: 0;
flex:1;
}
.live {
background-color:rgba(0, 0, 0, 0.685);
}
.dead {
background-color:rgba(228, 228, 241, 0.829);
}
td {
flex:1;
position: relative;
border:1px rgb(29, 182, 29) solid;
width: 0.5rem;
height: 0.5rem;
}
button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 1rem 2rem;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 0.5rem 0.5rem;
transition-duration: 0.4s;
cursor: pointer;
}
button:hover {
background-color: rgba(144, 180, 145, 0.596);
color: rgb(54, 59, 54)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel=stylesheet type="text/css" href="game.css">
</head>
<body>
<div class="center">
<div id="container">
</div>
<button id="startBtnId"><span>Start</span></button>
<button id="clearBtnId"><span>Clear</span></button>
<button id="randomBtnId"><span>Random</span></button>
<button id="generateBtnId"><span>Generate</span></button>
<input type="text" id="rowsId" value="rows">
<input type="text" id="colsId" value="cols">
<select id="sizeId">
<option value="Big">Big</option>
<option value="Medium">Medium</option>
<option value="Small">Small</option>
</select>
</div>
<script type="text/javascript" src="game.js"></script>
</body>
</html>
I would like to enter a number of rows and columns manually and the new table will be contained in the fixed container size.
For example, when I weigh 20 rows and 20 columns the container will be the same size as the one where 50 lines and 50 columns are balanced.
Enter the number of rows and columns, and then click generate
Since you have specified container as flex so if you add as many colum it will fit in to container, remove the flex and give width manual and check.
Below code is working for excel to html conversion and partial sorting.
I want when any cells in the header(or first row) is clicked the entire table should get sorted
based on that column(either ascending or descending).
Note:Below Code is tested with any excel input file and supporting settings for activex in internet options in IE9.
<HTML>
<HEAD>
<TITLE>Test</TITLE> <script type="text/javascript" src="../jquery-latest.js"></script>
<script type="text/javascript">
</script>
<STYLE TYPE="text/css">body div * { font-family: Verdana; font-weight: normal; font-size: 10px; } body { background-color: #FFEEFF; } .tableContainer table { border: 0px solid #000000; } .tblHeader { font-weight: bold; text-align: center; background-color: #FFAAEE; color: black; } .oddRow, .evenRow { vertical-align: top; } .tblHeader td, .oddRow td, .evenRow td { border-left: 2px solid #FFFFFF; border-bottom: 0px solid #000000; border-top: 0px solid #000000;} .lastCol { border-right: 0px solid #000000; } .oddRow { background-color: #abcdef; } .evenRow { background-color: #f0f0f0; }</STYLE>
<script LANGUAGE="JavaScript">
function _ge(id) {
return document.getElementById(id);
}
function sortTable(){
var tbl = document.getElementById("tblExcel2Html").tBodies[0];
var store = [];
//alert(tbl.rows.length);
for(var i=0, len=tbl.rows.length; i<len; i++){
var row = tbl.rows[i];
//alert(row.cells[1].innerText);
var sortnr = parseFloat(row.cells[1].textContent || row.cells[1].innerText);
if(!isNaN(sortnr)){
alert(store.push([sortnr, row]));
//store.push([sortnr, row]);
}
}
store.sort(function(x,y){
//alert(x[0] - y[0]);
return x[0] - y[0];
});
//alert(store.length);
for(var i=0, len=store.length; i<len; i++){
alert(tbl.appendChild(store[i][1]));
//alert(tbl.appendChild(store[i][1]));
}
//alert(store);
store = null;
}
function convert2HTML() {
var ex;
try {
ex = new ActiveXObject("Excel.Application");
}
catch (e)
{
alert('Your browser does not support the Activex object.\nPlease switch to Internet Explorer.');
return false;
}
//alert(arraytext);
//var ef = ex.Workbooks.Open("D:\\JS_HTML5\\Vin\\Test.xlsx");
var ef = ex.Workbooks.Open("D:\\JS_HTML5\\docs\\filter4\\tests\\Test.xlsx");
var es = ef.Worksheets(1);
var colsCount = ef.Worksheets(1).UsedRange.Columns.Count;
//alert(colsCount);
var rowsCount = ef.Worksheets(1).UsedRange.Rows.Count;
//alert(rowsCount);
var rStart = parseInt(1,10);
var cStart = parseInt(1,10);
var cEnd = parseInt(colsCount,10);
var rEnd = parseInt(rowsCount,10);
var oc = _ge('tableContainer');
oc.innerHTML = '';
var tbl = document.createElement('TABLE');
tbl.id = 'tblExcel2Html';
tbl.border = '10';
tbl.cellPadding = '4';
tbl.cellSpacing = '0';
oc.appendChild(tbl);
var i,j,row,col,r,c;
for(i = rStart, r = 0; i <= rEnd; i++,r++) {
row = tbl.insertRow(r);
row.className = (i == rStart) ? 'tblHeader' : (i % 2 == 0) ? 'evenRow' : 'oddRow';
for(j = cStart, c = 0; j <= cEnd; j++,c++) {
col = row.insertCell(c);
col.className = (j == cEnd) ? 'lastCol' : '';
col.innerHTML = es.Cells(i,j).value || ' ';
}
}
ex.ActiveWorkbook.Close(true);
ex.Application.Quit();
ex = null;
sortTable();
}
</script>
</HEAD>
<BODY onload = "convert2HTML()">
<h2>Test</h2>
<hr><br>
<!-- <td colspan="6" align="CENTER"><INPUT TYPE="button" VALUE="Convert to HTML" ONCLICK="convert2HTML()"></td> -->
<div id="tableContainer"></div>
<div id="tblExcel2Html"></div>
<footer>
<br>
<center> ©Initial Draft V0.1 </center>
</footer>
<a href="Home.html" >Home</a>
</BODY>
Basically i want to convert excel to html with sorting and filtering support.
Thanks in Advance
Vinoth.S
The creation of the object by calling
ex = new ActiveXObject("Excel.Application");
works only in windows systems with Excel installed. I suggest you to use jqgrid as javascript data-viewer and a php library like phpexcel that parse the excel and return raw data.