"Learn the process of tallying strings within a td table with the help of

I am looking to count the number of occurrences of a string in the column labeled status. However, I am uncertain about how to implement this logic using JavaScript.

Click here for an image example

Answer №1

Do you understand this concept?

<!DOCTYPE html>
<html>
<head>
<title>Test Results</title>
</head>
<body>

<table id="resultTable" style="width:100%">
  <tr>
    <th>Test Name</th>
    <th>Outcome</th>
  </tr>
  <tr>
    <td>Test A</td>
    <td class="outcome">Pass</td>
  </tr>
  <tr>
    <td>Test B</td>
    <td class="outcome">Fail</td>
  </tr>
  <tr>
    <td>Test C</td>
    <td class="outcome">Fail</td>
  </tr>
  <tr>
    <td>Test D</td>
    <td class="outcome">Pass</td>
  </tr>
</table>

<script>
let table = document.getElementById("resultTable");
let outcome_td = table.querySelectorAll("td.outcome");
let passed_counter = 0;
let failed_counter = 0;

for (let i = 0; i < outcome_td.length; i++) {
  let result = outcome_td[i].innerText;
  if(result === 'Pass') {
    passed_counter += 1;
  } else {
    failed_counter += 1;
  }
}

console.log(passed_counter);
console.log(failed_counter);
</script>

</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

sending multiple checkbox selections to a PHP script using jQuery

<form id="foo"> <input type="text" name="voucher" placeholder="voucher ID" class="bill_fillter"/> <input type="text" name="voucher" placeholder="voucher ID" class="bill_fillter"/> <input type="text" name="voucher" placeholder="voucher ...

Updating an Angular directive with dynamically added ng-module and ng-change attributes

Can someone check if I'm on the right track? Preamble: I've created a Typeahead class that fetches data and keeps it within itself. The class has the following structure: input: stores the search text. list: stores the results. change: a funct ...

Playing audio from local blob data is not supported on mobile browsers

I'm trying to stream blob data in mp3 format, but I'm experiencing difficulties with mobile browsers. The code below works perfectly on PC browsers, but not on mobile: // Javascript var url = URL.createObjectURL(blob); audio = document.getEleme ...

Utilizing JavaScript to dynamically alter an image based on selected dropdown option

I am currently facing an issue with my code where the selected image is not changing when I choose an option from the dropdown list. There are a total of 5 images, but for some reason, they are not displaying correctly. Here is the snippet of my code; < ...

Executing code after sending an HTTP response in Next.js: A comprehensive guide

Executing code after sending an HTTP response in Express can be done like this: res.send() await someAsyncFunction() // assuming this function takes a significant amount of time In the case of Next.js, testing locally shows that the above code behaves sim ...

Adjust the page height when switching between two divs

Currently, I have two divs that are being displayed one at a time using the toggle method. Please refer to the screenshot below: In the image provided, when the user clicks on "show more", the div will toggle based on the first item in the list. If the u ...

Unable to get angular button hold loop to work properly

My goal is to create a button that can be pressed once to execute a single command, but also has the capability to hold the button down and execute the command multiple times while still holding it. I am working with AngularJs (though I don't believe ...

Hiding labels using JQuery cannot be concealed

Why isn't this working? -_- The alert is showing, but nothing else happens. <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeaderContent"> <script type="text/javascript"> if (navigator.userA ...

An unexpected error occurred in NodeJS: It is not possible to adjust headers once they have been sent

Recently, I've been working on a nodejs project and encountered the error message "Can't set headers after they are sent" when trying to get a response from http://localhost:8080/api/user. Despite researching solutions on Stack Overflow, none of ...

Strategically handling the intricacies of JavaScript within an extensive project

How can I effectively handle the increasing number of JavaScript files in my application? We are developing a Django application with multiple apps, each serving different functions and requiring rendering across three modes (PC, tablet, mobile). Our Java ...

Converting a floating point number to a 4-byte hex string in JavaScript and reversing the process

I have received a hexadecimal data from the server side that is supposed to be in float format. I am trying to convert these hexadecimals into floats using JavaScript, but so far I have been unable to find a suitable method. Can anyone provide assistance ...

Keep a close eye on your Vue app to make sure it's

<template> <v-form :model='agency'> <v-layout row wrap> <v-flex xs12 sm12 lg12 > <v-layout row wrap> <v-flex xs12 md12 class="add-col-padding-right"> <v-radio-group v-mod ...

Is a Singleton really necessary for my situation?

I am currently developing a Firefox extension that requires keeping multiple windows synchronized with the same information. The toolbar in each window queries a remote server periodically, but since Firefox windows are isolated environments with their own ...

Oops! It seems like there was an issue trying to access a property that doesn't exist (specifically, the

Encountering an error on the HomeScreen of my project I aim to manipulate the state of my HomeScreen Page using redux. The data is fetched from an API (an array of items) and then displayed on the screen. However, despite all these processes, an error me ...

Clicking on the checkbox will trigger the corresponding table column to disappear

Upon clicking the filter icon in the top right corner, a menu will open. Within that menu, there are table header values with checkboxes. When a checkbox for a specific value is selected, the corresponding table column should be hidden. I have already impl ...

What is the best way to navigate to the bottom of a page when new data is added?

I've created a chat feature in my Ionic app, but the issue is that when a user receives a new message while being on the chat screen, the view doesn't automatically scroll down to show the new message. The user has to manually scroll down to see ...

Display an image with only a portion visible, no canvas, no frame, and no need

My dilemma involves an img with a surrounding box div. http://jsfiddle.net/6d4yC/7/ 1) I am seeking to display only a portion of the image (250x150) without generating a white overlay when it is in its large size. Placing a #box1 div around the image has ...

Tips for minimizing redundant calls to a JavaScript function

Currently working on an app using php and js. I have a menu sidebar with various items, where clicking on an item loads the corresponding php file into the main container using jQuery's load function. However, there is a critical problem when loading ...

Embracing Micro Front End Development

Currently, I have a legacy AngularJS (Angular 1) app that cannot undergo any major changes at the moment. A new standalone app has been created using a newer stack. The goal is to integrate this new app into the old legacy app without making significant m ...

Creating dynamic headers in Axios within an ExpressJS application

I have a specific requirement that calls for setting a custom Request-Id header for each axios request. The value of this header is generated dynamically by a separate express middleware. While I could manually set the header like this: axios.get(url, he ...