CODEWITHSUNDEEP
javascriptjqueryhtml
maramzook
maramzook

Reputation: 33

How to find the number of a specific entry for each column in my HTML table?

I have two tables in my HTML file. I want to generate some statistic from myTable into summaryTable. I want the total number of tests[in column 1], total number of "Success"[in column 2], and total number of "Failure"[in column 2] to be put in column 1 to 3 of summaryTable. I appreciate any help.

HTML

<table id="myTable">
  <tr>
    <th>Test</th>
    <th>Status</th>
    <th>Last Run</th>
  </tr>
  <tr>
    <td>RL-008</td>
    <td><font color=RED>Failure</font></td>
    <td>Friday, May 19, 2017 03:19:29 AM
      <br>
    </td>
  </tr>

  <tr>
    <td>SO-010</td>
    <td><font color=GREEN>Success</font></td>
    <td>Thursday, May 18, 2017 10:44:17 PM
      <br>
    </td>
  </tr>
  <tr>
    <td>SC-001</td>
    <td><font color=RED>Failure</font></td>
    <td>Friday, May 19, 2017 12:27:31 AM
      <br>
    </td>
  </tr>
</table>

<table id=summaryTable>
  <tr>
    <th id="summary">No of Tests</th>
    <th id="summary">No of Failed</th>
    <th id="summary">No of Passed</th>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Upvotes: 1

Views: 71

Answers (3)

Michał Sałaciński
Michał Sałaciński

Reputation: 2266

Plain & short JS

var passed = document.querySelectorAll('tr td font[color="GREEN"]').length;
var failed = document.querySelectorAll('tr td font[color="RED"]').length
document.getElementById('summary1').innerHTML += (passed+failed) || 0;
document.getElementById('summary2').innerHTML += failed || 0;
document.getElementById('summary3').innerHTML += passed || 0;
<table id="myTable">
  <tr>
    <th>Test</th>
    <th>Status</th>
    <th>Last Run</th>
  </tr>
  <tr>
    <td>RL-008</td>
    <td><font color=RED>Failure</font></td>
    <td>Friday, May 19, 2017 03:19:29 AM
      <br>
    </td>
  </tr>

  <tr>
    <td>SO-010</td>
    <td><font color=GREEN>Success</font></td>
    <td>Thursday, May 18, 2017 10:44:17 PM
      <br>
    </td>
  </tr>
  <tr>
    <td>SC-001</td>
    <td><font color=RED>Failure</font></td>
    <td>Friday, May 19, 2017 12:27:31 AM
      <br>
    </td>
  </tr>
</table>

<table id=summaryTable>
  <tr>
    <th id="summary1">No of Tests: </th>
    <th id="summary2">No of Failed: </th>
    <th id="summary3">No of Passed: </th>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Upvotes: 1

Lajos Arpad
Lajos Arpad

Reputation: 76564

Using plain Javascript you can gather the table, iterate its rows and increase some variables which will hold the needed values.

//Getting the original table
var myTable = document.getElementById("myTable");
//Getting the rows of the original table
var rows = myTable.getElementsByTagName("tr");
var success = 0;
var failure = 0;
var tests = 0;
for (var rowIndex in rows) {
    //Get the columns
    var columns = rows[rowIndex].getElementsByTagName("td");
    //Let's skip the header
    if (columns.length) {
        //Adjust the values
        tests++;
        if (columns[1].innerText === "Success") success++;
        else if (columns[1].innerText === "Failure") failure++;
    }
}

var target = document.getElementById("summaryTable");
var targetHeadings = target.getElementsByTagName("th");
targetRows[0].innerText = tests;
targetRows[1].innerText = success;
targetRows[2].innerText = failure;

Upvotes: 1

Woodrow
Woodrow

Reputation: 2832

Your code needs to be cleaned up a little bit (removing FONT tag, not using duplicate ID's for "summary" etc), but this should do what you're looking for. If you're using a server side language to loop and render the main table, (PHP, etc) you can get the counts using PHP to render the summary table..

$(document).ready(function() {

  var $testTable = $('#myTable');
  var numTests = $('tbody tr', $testTable).length;
  var numFailed = $('tbody tr:contains("Failure")', $testTable).length;
  var numPassed = $('tbody tr:contains("Success")', $testTable).length;

  $('#num-tests').text(numTests);
  $('#failed-tests').text(numFailed);
  $('#passed-tests').text(numPassed);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
  <thead>
    <tr>
      <th>Test</th>
      <th>Status</th>
      <th>Last Run</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>RL-008</td>
      <td>
        <font color="RED">Failure</font>
      </td>
      <td>Friday, May 19, 2017 03:19:29 AM
        <br>
      </td>
    </tr>

    <tr>
      <td>SO-010</td>
      <td>
        <font color="GREEN">Success</font>
      </td>
      <td>Thursday, May 18, 2017 10:44:17 PM
        <br>
      </td>
    </tr>
    <tr>
      <td>SC-001</td>
      <td>
        <font color="RED">Failure</font>
      </td>
      <td>Friday, May 19, 2017 12:27:31 AM
        <br>
      </td>
    </tr>
  </tbody>
</table>

<table id="summaryTable">
  <tr>
    <th>No of Tests</th>
    <th>No of Failed</th>
    <th>No of Passed</th>
  </tr>
  <tr>
    <td id="num-tests"></td>
    <td id="failed-tests"></td>
    <td id="passed-tests"></td>
  </tr>
</table>

Upvotes: 2

Related Questions