Original Version
What I expect
I need to do my table like this but I don’t know JavaScript and I need some help about that.
Numbers are always changing
They said it could be done with JavaScript or PHP, but I couldn’t do it with php. Since I have no knowledge of JavaScript, I wanted to consult you.
JavaScript
x
100
100
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="tr-TR">3
<head>4
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>5
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>6
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">7
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>8
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>9
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>10
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>11
</head>12
<body>13
<div class="container">14
<div class="custom-table-responsive ">15
<div class="text-center">16
<div class="bg-light p-3 overflow-hidden rounded border shadow">17
<div class="table-responsive">18
<table class="table table-striped table-hover table-light mb-0 table-bordered">19
<thead>20
<tr>21
<th style="width: 220px" rowspan="2" class="align-middle">22
<div>TESTER</div>23
</th>24
<th colspan="2">25
<div><a href="#" class="hide-row float-right"></a>Category 1</div>26
</th>27
<th colspan="2">28
<div><a href="#" class="hide-row float-right"></a>Category 2</div>29
</th>30
<th colspan="2">31
<div><a href="#" class="hide-row float-right"></a>Category 3</div>32
</th>33
<th colspan="2">34
<div><a href="#" class="hide-row float-right"></a>Category 4</div>35
</th>36
</tr>37
<tr>38
<th><span>Sell</span></th>39
<th><span>Buy</span></th>40
<th><span>Sell</span></th>41
<th><span>Buy</span></th>42
<th><span>Sell</span></th>43
<th><span>Buy</span></th>44
<th><span>Sell</span></th>45
<th><span>Buy</span></th>46
</tr>47
</thead>48
<tbody>49
<tr>50
<th class="table-left-seperator">TEST</th>51
<td><?php echo rand(100,1500); ?></td>52
<td><?php echo rand(100,1500); ?></td>53
<td><?php echo rand(100,1500); ?></td>54
<td><?php echo rand(100,1500); ?></td>55
<td><?php echo rand(100,1500); ?></td>56
<td><?php echo rand(100,1500); ?></td>57
<td><?php echo rand(100,1500); ?></td>58
<td><?php echo rand(100,1500); ?></td>59
</tr>60
<tr>61
<th class="table-left-seperator">TEST</th>62
<td><?php echo rand(100,1500); ?></td>63
<td><?php echo rand(100,1500); ?></td>64
<td><?php echo rand(100,1500); ?></td>65
<td><?php echo rand(100,1500); ?></td>66
<td><?php echo rand(100,1500); ?></td>67
<td><?php echo rand(100,1500); ?></td>68
<td><?php echo rand(100,1500); ?></td>69
<td><?php echo rand(100,1500); ?></td>70
</tr>71
<tr>72
<th class="table-left-seperator">TEST</th>73
<td><?php echo rand(100,1500); ?></td>74
<td><?php echo rand(100,1500); ?></td>75
<td><?php echo rand(100,1500); ?></td>76
<td><?php echo rand(100,1500); ?></td>77
<td><?php echo rand(100,1500); ?></td>78
<td><?php echo rand(100,1500); ?></td>79
<td><?php echo rand(100,1500); ?></td>80
<td><?php echo rand(100,1500); ?></td>81
</tr>82
<tr>83
<th class="table-left-seperator">TEST</th>84
<td><?php echo rand(100,1500); ?></td>85
<td><?php echo rand(100,1500); ?></td>86
<td><?php echo rand(100,1500); ?></td>87
<td><?php echo rand(100,1500); ?></td>88
<td><?php echo rand(100,1500); ?></td>89
<td><?php echo rand(100,1500); ?></td>90
<td><?php echo rand(100,1500); ?></td>91
<td><?php echo rand(100,1500); ?></td>92
</tr>93
</tbody>94
</table>95
</div>96
</div>97
</div>98
</div>99
</body>100
</html>Advertisement
Answer
While SO isn’t the place for getting people to do code for you, this was a fun challenge, so I couldn’t help myself, sorry.
I agree that this should be done serverside for convenience (and maybe even for performance(?)), but here is a Javascript solution.
I hardcoded the random php values, but you can just replace all numbers again with <?php echo rand(100,1500); ?> or use your own (it will still work with your original php/html).
JavaScript
1
33
33
1
const tBody = document.querySelector("tbody");2
const trs = tBody.querySelectorAll("tr");3
const tds = tBody.querySelectorAll("td");4
5
const numberOfColumns = tds.length / trs.length;6
let isSellClm = true;7
8
for (let clm = 0; clm < numberOfColumns; clm++) {9
const highLow = {10
value: isSellClm ? Infinity : 0,11
element: null12
};13
14
for (let row = 0; row < trs.length; row++) {15
const td = tds[row * numberOfColumns + clm];16
const number = parseInt(td.textContent);17
18
if (isSellClm) {19
if (number < highLow.value) {20
highLow.value = number,21
highLow.element = td;22
}23
} else {24
if (number > highLow.value) {25
highLow.value = number,26
highLow.element = td;27
}28
}29
}30
31
highLow.element.style.color = isSellClm ? "green" : "red";32
isSellClm = !isSellClm;33
}JavaScript
1
90
90
1
<div class="container">2
<div class="custom-table-responsive ">3
<div class="text-center">4
<div class="bg-light p-3 overflow-hidden rounded border shadow">5
<div class="table-responsive">6
<table class="table table-striped table-hover table-light mb-0 table-bordered">7
<thead>8
<tr>9
<th style="width: 220px" rowspan="2" class="align-middle">10
<div>TESTER</div>11
</th>12
<th colspan="2">13
<div>14
<a href="#" class="hide-row float-right"></a>Category 1</div>15
</th>16
<th colspan="2">17
<div>18
<a href="#" class="hide-row float-right"></a>Category 2</div>19
</th>20
<th colspan="2">21
<div>22
<a href="#" class="hide-row float-right"></a>Category 3</div>23
</th>24
<th colspan="2">25
<div>26
<a href="#" class="hide-row float-right"></a>Category 4</div>27
</th>28
</tr>29
<tr>30
<th><span>Sell</span></th>31
<th><span>Buy</span></th>32
<th><span>Sell</span></th>33
<th><span>Buy</span></th>34
<th><span>Sell</span></th>35
<th><span>Buy</span></th>36
<th><span>Sell</span></th>37
<th><span>Buy</span></th>38
</tr>39
</thead>40
<tbody>41
<tr>42
<th class="table-left-seperator">TEST</th>43
<td>398</td>44
<td>510</td>45
<td>359</td>46
<td>809</td>47
<td>1151</td>48
<td>1123</td>49
<td>787</td>50
<td>1443</td>51
</tr>52
<tr>53
<th class="table-left-seperator">TEST</th>54
<td>549</td>55
<td>1201</td>56
<td>1112</td>57
<td>1276</td>58
<td>1440</td>59
<td>177</td>60
<td>822</td>61
<td>218</td>62
</tr>63
<tr>64
<th class="table-left-seperator">TEST</th>65
<td>1278</td>66
<td>701</td>67
<td>797</td>68
<td>194</td>69
<td>403</td>70
<td>477</td>71
<td>1447</td>72
<td>534</td>73
</tr>74
<tr>75
<th class="table-left-seperator">TEST</th>76
<td>712</td>77
<td>1399</td>78
<td>406</td>79
<td>411</td>80
<td>531</td>81
<td>497</td>82
<td>483</td>83
<td>459</td>84
</tr>85
</tbody>86
</table>87
</div>88
</div>89
</div>90
</div>If you need the code to be more robust, you should give the queried elements an id or data-attribute or some other unique identifier and query that, eg.:
JavaScript
1
2
1
<tbody id="table-body">2
JavaScript
1
2
1
const tBody = document.querySelector("#table-body");2