Skip to content
Advertisement

I want to add a color to the highest number in the column row on the table [closed]

Original Version enter image description here

What I expect enter image description here

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="tr-TR">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <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>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <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>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
      <div class="custom-table-responsive ">
        <div class="text-center">
          <div class="bg-light p-3 overflow-hidden rounded border shadow">
            <div class="table-responsive">
              <table class="table table-striped table-hover table-light mb-0 table-bordered">
                <thead>
                  <tr>
                    <th style="width: 220px" rowspan="2" class="align-middle">
                      <div>TESTER</div>
                    </th>
                    <th colspan="2">
                      <div><a href="#" class="hide-row float-right"></a>Category 1</div>
                    </th>
                    <th colspan="2">
                      <div><a href="#" class="hide-row float-right"></a>Category 2</div>
                    </th>
                    <th colspan="2">
                      <div><a href="#" class="hide-row float-right"></a>Category 3</div>
                    </th>
                    <th colspan="2">
                      <div><a href="#" class="hide-row float-right"></a>Category 4</div>
                    </th>
                  </tr>
                  <tr>
                    <th><span>Sell</span></th>
                    <th><span>Buy</span></th>
                    <th><span>Sell</span></th>
                    <th><span>Buy</span></th>
                    <th><span>Sell</span></th>
                    <th><span>Buy</span></th>
                    <th><span>Sell</span></th>
                    <th><span>Buy</span></th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th class="table-left-seperator">TEST</th>
                    <td><?php echo rand(100,1500); ?></td>
                    <td><?php echo rand(100,1500); ?></td>
                    <td><?php echo rand(100,1500); ?></td>
                    <td><?php echo rand(100,1500); ?></td>
                    <td><?php echo rand(100,1500); ?></td>
                    <td><?php echo rand(100,1500); ?></td>
                    <td><?php echo rand(100,1500); ?></td>
                    <td><?php echo rand(100,1500); ?></td>
                  </tr>
                  <tr>
                    <th class="table-left-seperator">TEST</th>
                    <td><?php echo rand(100,1500); ?></td>
                    <td><?php echo rand(100,1500); ?></td>
                    <td><?php echo rand(100,1500); ?></td>
                    <td><?php echo rand(100,1500); ?></td>
                    <td><?php echo rand(100,1500); ?></td>
                    <td><?php echo rand(100,1500); ?></td>
                    <td><?php echo rand(100,1500); ?></td>
                    <td><?php echo rand(100,1500); ?></td>
                  </tr>
                  <tr>
                    <th class="table-left-seperator">TEST</th>
                    <td><?php echo rand(100,1500); ?></td>
                    <td><?php echo rand(100,1500); ?></td>
                    <td><?php echo rand(100,1500); ?></td>
                    <td><?php echo rand(100,1500); ?></td>
                    <td><?php echo rand(100,1500); ?></td>
                    <td><?php echo rand(100,1500); ?></td>
                    <td><?php echo rand(100,1500); ?></td>
                    <td><?php echo rand(100,1500); ?></td>
                  </tr>
                  <tr>
                    <th class="table-left-seperator">TEST</th>
                    <td><?php echo rand(100,1500); ?></td>
                    <td><?php echo rand(100,1500); ?></td>
                    <td><?php echo rand(100,1500); ?></td>
                    <td><?php echo rand(100,1500); ?></td>
                    <td><?php echo rand(100,1500); ?></td>
                    <td><?php echo rand(100,1500); ?></td>
                    <td><?php echo rand(100,1500); ?></td>
                    <td><?php echo rand(100,1500); ?></td>
                  </tr>
                </tbody>
              </table>
            </div>
        </div>
      </div>
    </div>
</body>
</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).

const tBody = document.querySelector("tbody");
const trs = tBody.querySelectorAll("tr");
const tds = tBody.querySelectorAll("td");

const numberOfColumns = tds.length / trs.length;
let isSellClm = true;

for (let clm = 0; clm < numberOfColumns; clm++) {
  const highLow = {
    value: isSellClm ? Infinity : 0,
    element: null
  };

  for (let row = 0; row < trs.length; row++) {
    const td = tds[row * numberOfColumns + clm];
    const number = parseInt(td.textContent);

    if (isSellClm) {
      if (number < highLow.value) {
        highLow.value = number,
          highLow.element = td;
      }
    } else {
      if (number > highLow.value) {
        highLow.value = number,
          highLow.element = td;
      }
    }
  }

  highLow.element.style.color = isSellClm ? "green" : "red";
  isSellClm = !isSellClm;
}
<div class="container">
  <div class="custom-table-responsive ">
    <div class="text-center">
      <div class="bg-light p-3 overflow-hidden rounded border shadow">
        <div class="table-responsive">
          <table class="table table-striped table-hover table-light mb-0 table-bordered">
            <thead>
              <tr>
                <th style="width: 220px" rowspan="2" class="align-middle">
                  <div>TESTER</div>
                </th>
                <th colspan="2">
                  <div>
                    <a href="#" class="hide-row float-right"></a>Category 1</div>
                </th>
                <th colspan="2">
                  <div>
                    <a href="#" class="hide-row float-right"></a>Category 2</div>
                </th>
                <th colspan="2">
                  <div>
                    <a href="#" class="hide-row float-right"></a>Category 3</div>
                </th>
                <th colspan="2">
                  <div>
                    <a href="#" class="hide-row float-right"></a>Category 4</div>
                </th>
              </tr>
              <tr>
                <th><span>Sell</span></th>
                <th><span>Buy</span></th>
                <th><span>Sell</span></th>
                <th><span>Buy</span></th>
                <th><span>Sell</span></th>
                <th><span>Buy</span></th>
                <th><span>Sell</span></th>
                <th><span>Buy</span></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th class="table-left-seperator">TEST</th>
                <td>398</td>
                <td>510</td>
                <td>359</td>
                <td>809</td>
                <td>1151</td>
                <td>1123</td>
                <td>787</td>
                <td>1443</td>
              </tr>
              <tr>
                <th class="table-left-seperator">TEST</th>
                <td>549</td>
                <td>1201</td>
                <td>1112</td>
                <td>1276</td>
                <td>1440</td>
                <td>177</td>
                <td>822</td>
                <td>218</td>
              </tr>
              <tr>
                <th class="table-left-seperator">TEST</th>
                <td>1278</td>
                <td>701</td>
                <td>797</td>
                <td>194</td>
                <td>403</td>
                <td>477</td>
                <td>1447</td>
                <td>534</td>
              </tr>
              <tr>
                <th class="table-left-seperator">TEST</th>
                <td>712</td>
                <td>1399</td>
                <td>406</td>
                <td>411</td>
                <td>531</td>
                <td>497</td>
                <td>483</td>
                <td>459</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </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.:

<tbody id="table-body">

const tBody = document.querySelector("#table-body");
User contributions licensed under: CC BY-SA
4 People found this is helpful
Advertisement