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.
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 have the below design to be created dynamically
I have this layout & wanted to convert this using HTML CSS. My requirement is that, when any column is deleted another column should increase the space in place of a deleted column.
Also, the same is needed when someone removes any row, the previous row should take place of that row.
To build the grid: You can archive this by using a loop inside a loop. For Styling i use flex box system.
const c = document.querySelector('div');
for (let i = 0; i < 4; i++) {
const row = document.createElement('div');
row.setAttribute('class','row')
for (let j = 0; j < 4; j++) {
const cell = document.createElement('div');
cell.setAttribute('class','cell')
cell.innerHTML = i + ' - ' +j
row.append(cell);
}
c.append(row)
}
.container {
background: yellow;
height:100vh;
}
.row {
display: flex;
}
.cell {
border: 1px solid black;
padding: 5px;
width:25%;
height: 25vh;
}
<div class="container"></div>
I've created a table that is contained within a section of my webpage and can scroll over the x and y axis to view everything. My problem so far is that the table can scroll along the y-axis when overflowing, but not the x-axis.
In my CSS, I've specified that on the overflow of both, they should both be able to scroll, but only the y-axis works. How would I ensure that the x-axis is scrollable also in order to see the rest of my table?
HTML:
<div id="table-wrapper-tasks">
<div id="table-scroll-tasks">
<script>
var rows = document.getElementById('dayRow').getElementsByTagName("td").length;
var cols = document.getElementById('employeeCol').getElementsByTagName("tr").length;
var rowT = null;
var drawTable = '<table class="tableTasks">';
for (let i = 0; i < rows; i++) {
drawTable += '<tr>';
for(let j = 0; j < cols; j++) {
drawTable += '<td>Testing</td>';
}
drawTable += '</tr>';
}
drawTable += '</table>';
document.write(drawTable);
</script>
</div>
</div>
CSS:
/* Settings for Tasks table */
.tableTasks {
float:right;
width:100%;
margin-top:5px;
empty-cells: show;
height:1000px;
line-height: 35px;
width: 100px;
}
#table-wrapper-tasks {
position: relative;
width:81%;
float:right;
}
#table-scroll-tasks {
overflow-x: scroll;
overflow-y: scroll;
max-height: 520px;
}
The problem is where you are specifying float property. If you remove it things should work fine.
.tableTasks {
width:100%;
margin-top:5px;
empty-cells: show;
height:1000px;
line-height: 35px;
width: 100px;
}
I created a table dynamically, being populated from database. What want to do is to created a fixed header and a scrollable body. I tried css and javascript but didn't manage to do anything, I think because table is created automatically.
Help.
Here is my code:
private void GenerateTable();
{
DataTable dt = CreateDataTable();//in CreateDataTable I just take all my reocrds from database
Table table = new Table();
TableRow row = null;
row = new TableRow();
for (int j = 0; j < dt.Columns.Count; j++)
{
TableHeaderCell headerCell = new TableHeaderCell();
headerCell.Text = dt.Columns[j].ColumnName;
row.Cells.Add(headerCell);
}
table.Rows.Add(row);
//Add the Column values
for (int i = 0; i < dt.Rows.Count; i++)
{
row = new TableRow();
for (int j = 0; j < dt.Columns.Count; j++)
{
TableCell cell = new TableCell();
cell.Text = dt.Rows[i][j].ToString();
row.Cells.Add(cell);
}
table.Rows.Add(row);
}
tablediv.Controls.Add(table);
}
Div where I add the table:
<div class="mainEntry" style="width:90%" id="tablediv" runat="server" />
And my CSS for table:
table {
border-collapse: collapse;
width: 100%;
color: white;
}
th, td {
text-align: left;
padding: 8px;
}
th{
font-size:20px;
}
tbody{
height:500px;
overflow:auto;
display:block;
}
tr:nth-child(even){background-color: rgba(255, 255, 255, .15)}
th {
background-color: rgba(174, 183, 212, .15);
color: white;
}
I hope this css classes demo can help you. Visit fiddlehttp://jsfiddle.net/TweNm/