Draw a box around some table elements based on a condition in HTML / CSS
I have an index.html file that looks like this:
span {
outline: 2px solid black;
}
.wrapped {
outline: 2px solid red;
}
.wrapped span {
border: 1px solid white;
background-color: white;
position: relative;
z-index: 1000;
}
<body>
<div class="container">
<table align="center">
<tr>
<th bgcolor="#f0a00c">Col1</th>
<th bgcolor="#f0a00c">Col2</th>
<th bgcolor="#f0a00c">Col3</th>
<th bgcolor="#f0a00c">Col4</th>
<th bgcolor="#f0a00c">Col5</th>
</tr>
<script>var dictionary = {}</script>
{% for b in obj %}
<tr>
<td>{{ b.col1 }}</td>
<td><span class="wrapped"><span>{{ b.col2 }}</span></span></td>
<td>{{ b.col3 }}</td>
<script> if (!dictionary["{{ b.col2 }}"]) {
dictionary["{{ b.col2 }}"] = [];
}
dictionary["{{ b.col2 }}"].push("{{ b.col3 }}");</script>
<td>{{ b.col4 }}</td>
<td>{{ b.col5 }}</td>
</tr>
{% endfor %}
<script>
delete dictionary[""];
console.log(dictionary)
for (var key in dictionary)
{
if (dictionary[key].length > 1) {
var name1 = []
var id = []
for (i in dictionary[key]) {
var reg1 = dictionary[key][i].split("(")[0];
name1.push(reg1);
var reg2 = dictionary[key][i].split("_")[1].match(/[A-Z0-9]*/i);
id.push(reg2[0]);
}
console.log(name1);
console.log(id);
}
}
</script>
</table>
</div> <!-- /container -->
</body>
I am reading a table from mysql database that looks like this:
Col2 | Col3 | Col4
1 | Name1(something_1234) | Some_date
1 | Name1(something_3456) | Some_date
2 | Name3(something_7890) | Some_date
2 | Name4(something_0988) | Some_date
The output dictionary
in the above snippet looks like this:
{'1': ['Name1(something_1234)', 'Name1(something_3456)'], '2': 'Name3(something_7890)', 'Name4(something_0988)']}
Both name1
and id
returns the name part and the identification part, respectively, col3
for each key (i.e. ['Name1', 'Name1']
, ['1234', '3456']
for the key 1
).
Now, I want to know how I can add css on top of the rendered table (sort of like conditional css, for example, for all the same col2 values, add a field around it and then check the values of its name parts, if they are then add a field around them. otherwise add separate blocks around and similarly for id parts) so I get the following output:
UPDATE: Updated my code above. I can draw a window around each Col2 item. But I want to check if the value of cell col2 matches the previous value and then concatenate a rectangle around the box. And how to draw a box only around a part of the text in a cell i.e. around the name and id part in Col3?
source to share
Ok, but I still don't understand how the window will be generated using css / html. Can you show me an example?
Yes, I did something similar to your drawing in js fiddle: https://jsfiddle.net/tq0u0876/
Now you need to generate HTML with Blade and JS syntax.
HTML:
<table>
<tr>
<td><span class="border-top">1</span></td>
<td>
<span class="border-top">Name1</span>
<span>(something_</span>
<span class="border-top border-bottom">1234</span>
<span>)</span>
</td>
<td><span>some data</span></td>
</tr>
<tr>
<td><span class="border-bottom">1</span></td>
<td>
<span class="border-bottom">Name1</span>
<span>(something_</span>
<span class="border-top border-bottom">3456</span>
<span>)</span>
</td>
<td><span>some data</span></td>
</tr>
<tr>
<td><span class="border-top">2</span></td>
<td>
<span class="border-top border-bottom">Name2</span>
<span>(something_</span>
<span class="border-top border-bottom">7890</span>
<span>)</span>
</td>
<td><span>some data</span></td>
</tr>
<tr>
<td><span class="border-middle">2</span></td>
<td>
<span class="border-top border-bottom">Name3</span>
<span>(something_</span>
<span class="border-top border-bottom">0988</span>
<span>)</span>
</td>
<td><span>some data</span></td>
</tr>
<tr>
<td><span class="border-bottom">2</span></td>
<td>
<span class="border-top border-bottom">Name4</span>
<span>(something_</span>
<span class="border-top border-bottom">7890</span>
<span>)</span>
</td>
<td><span>some data</span></td>
</tr>
</table>
CSS
.border-top {
border-top: 2px solid;
border-left: 2px solid;
border-right: 2px solid;
}
.border-bottom {
border-bottom: 2px solid;
border-left: 2px solid;
border-right: 2px solid;
}
.border-middle {
border-left: 2px solid;
border-right: 2px solid;
}
table { border-collapse: collapse; }
span { display:inline-block; line-height:26px; margin-bottom:-6px; }
td:nth-child(1) span { border-color:red; min-width:20px; }
td:nth-child(2) span:nth-child(1) { border-color:green; min-width:60px; }
td:nth-child(2) span:nth-child(3) { border-color:blue; min-width:60px; }
source to share