What is the most efficient way to access a cell within an HTML table using jQuery or the Document Object Model (

I have an unchangeable HTML table styled with CSS. My goal is to extract the value from the first column for filtering purposes. I've been struggling to locate a suitable jQuery or DOM function to accomplish this task.

  1. Unable to find a way to access the cell value directly, I attempted to retrieve the content of the first column instead.
  2. The first column is marked in bold. Despite my efforts to extract it using the bold tag, the method proved ineffective.
<html>
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="expires" content="0">
</head>

<body>
<table class="mon_head">
    <tr>
        <td valign="bottom"></td>
        <td align="right" valign="bottom">
            <p>School <span style="width:10px">&nbsp;</span> Adresse<br />
            Stundenplan 2016/2017<span style="width:10px">&nbsp;</span> <span style="width:10px">&nbsp;</span> Stand: 01.12.2017 10:12</p>
        </td>
    </tr>
</table>

<center>
<div class="mon_title">9.12.2016 Freitag</div>
<table class="info" >
<tr class="info"><th class="info" align="center" colspan="2">Nachrichten zum Tag</th></tr>
<tr class='info'><td class='info' colspan="2">Indubio Müsli</td></tr>
</table>
<p>
<table class="mon_list" >
<tr class='list'>
<th class="list" align="center"><b>Klasse(n)</b></th>
<th class="list" align="center">Stunde</th>
<th class="list" align="center">(Lehrer)</th>
<th class="list" align="center"><b>Vertreter</b></th>
<th class="list" align="center">Fach</th><th class="list" align="center">Raum</th>
<th class="list" align="center">Vertretungs-Text</th>
</tr>
<tr class='list odd'>
<td class="list" align="center"><b>5a</b></td>
<td class="list" align="center">5</td>
<td class="list" align="center">Se</td>
<td class="list" align="center"><b>Ma</b></td>
<td class="list" align="center">BNT-b</td>
<td class="list" align="center">2.25</td>
<td class="list" align="center">Vertretung</td></tr>
<tr class='list even'>
<td class="list" align="center"><b>5a</b></td>
<td class="list" align="center">6</td>
<td class="list" align="center">Se</td>
<td class="list" align="center"><b>---</b></td>
<td class="list" align="center">---</td>
<td class="list" align="center">---</td>
<td class="list" align="center">frei</td></tr>
<tr class='list odd'>
<td class="list" align="center"><b>5c</b></td>
<td class="list" align="center">1</td>
<td class="list" align="center">Mü</td>
<td class="list" align="center"><b>Au</b></td>
<td class="list" align="center">M</td>
<td class="list" align="center">1.23</td>
<td class="list" align="center">Aufgaben</td></tr>
<tr class='list even'>
<td class="list" align="center"><b>5c</b></td>
<td class="list" align="center">2</td>
<td class="list" align="center">Mü</td>
<td class="list" align="center"><b>Gi</b></td>
<td class="list" align="center">M</td>
<td class="list" align="center">1.23</td>
<td class="list" align="center">Aufgaben</td></tr>
</table>
</p>
<p id="ausgabe"></p>
</center>

<script>


function filtern(){
//Current approach not yielding results
var klasse = "5a " + document.querySelectorAll('<b>').innerHTML; 
document.getElementById("ausgabe").innerHTML = klasse

}
</script>


</body>
</html>

The final output reads: 5a undefined

javascriptjqueryhtmlcsshtml-table

Answer №1

Let's first clarify the selector for the <b> element is simply 'b', not '<b>'.

In addition, keep in mind that querySelectorAll() returns a nodeList, which means there is no innerHTML property on that object. Since there are multiple b elements in the table, you will need to use a loop to create a string from all of them. An implicit way to do this is by using map().

Lastly, note the usage of .mon_list in the selector below to limit the retrieved elements to only those within the target table, along with :nth-child(1) to fetch the cells from the first column.

Furthermore, as mentioned by T.J. Crowder in the comments, it would be better practice to avoid relying on the existence of the b element in the cell and instead directly read the textContent of the td.

Try the following code snippet:

function filterItems() {
  var classes = Array.from(document.querySelectorAll('.mon_list td:nth-child(1)')).map(function(el) {
    return el.textContent;
  }).join(', ');
  document.getElementById("output").innerHTML = classes
}

filterItems();
<table class="mon_list">
   <tr class='list'>
     <th class="list" align="center"><b>Classes</b></th>
     .... more table rows ....
   </table>
   <p id="output"></p>

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

What is the best way to add a background to certain elements?

Is there a simple and elegant way to swap the background of the circle with the background of the div underneath? I would like the circles to have the background image of div "one", while keeping div "one" invisible (not using visibility:hidden). I am lo ...

htmlcss

Retrieving the checked value of a checkbox in Angular instead of a boolean value

Currently I am working on a project using ServiceNow and AngularJS. I am having trouble obtaining the value of a checkbox. Here is the code snippet: $scope.userFavourite = function(favourite){ alert(favourite); } <labe for="tea"& ...

javascriptangularangularjs

initiate a page refresh upon selecting a particular checkbox

So I've got this code that saves around 30 checkbox selections to local storage, which is working fine. Then there's this separate checkbox below, when checked it automatically reloads the page: <input type="checkbox" id="autoload" class="aut ...

javascriptlocal-storage

What could be the reason for the absence of the HTTP response in the network tab of the Chrome debugger?

After utilizing Postman to test my web service, I was able to find the WS's response in the http response body. However, when I made a call using ajax in my web application, I encountered an issue where I could no longer locate the response. The tab ...

javascriptajaxgoogle-chrome-devtools

Creating a series of images in JavaScript using a for loop

Currently attempting to create an array of images, but with a large number of images I am looking into using a "for loop" for generation. Here is my current code snippet : var images = [ "/images/image0000.png", "/images/image0005.png", "/ima ...

javascript

Require a date picker in Vuetify, prohibiting any kind of text input

I am working with vuetify to create a date picker for capturing a user's birthday. I need the date picker to be a required field in my form and only accept date values. Here is what I have attempted: <v-flex xs12> <v-menu ref="menu" ...

htmlvue.jsdatepickervuetify.js

Enhance your UI experience with a beautifully styled button using Material-

I was using a Material UI button with a purple background. <Button component={Link} to={link} style={{ background: '#6c74cc', borderRadius: 3, border: 0, color: 'white', heig ...

javascriptcssreactjstypescriptstyled-components

Floating container leads to delays

My goal is to create a div that changes when I hover over it. However, when I move my mouse into the div, there seems to be some lagging and the content does not appear clearly. Below is the HTML and CSS code I have used: .unshow-txt:hover, .unshow-txt: ...

htmlcss

Adding styling to my project using @material-ui v5 has resulted in a CSS rule being injected, although I did not define it myself

I'm in the process of incorporating a simple menu component into my project, and I followed the instructions provided in the documentation. When viewing it in a CodeSandbox, everything appears as expected. However, within my actual project, the menu ...

javascriptmaterial-uiemotion

How can AngularJS achieve ng-repeat functionality with multiple variables similar to ng-init?

When using ng-init, you have the ability to utilize multiple variables: ng-init="var1=value1; var2=value2" I attempted something similar with ng-repeat but unfortunately it did not work as expected ng-repeat= "var1 in var1s; var2 in var2s" Is there a p ...

javascriptangularjs

Issues with Wordpress plugins functioning properly in Internet Explorer versions 9 and above

My wordpress site is running smoothly on Chrome, Safari, and Firefox, but Internet Explorer seems to be causing some issues. I had a similar problem with two plugins across all browsers, but after disabling 'AJAX' transitions for certain pages, e ...

jqueryajaxwordpressinternet-explorerplugins

What could be the reason my SVG images are not displaying?

My website contains SVGs that are not loading consistently. I acquired some from freeicons/icon8 and created a couple using Inkscape. Initially, I inserted them using HTML but switched to CSS after doing research online on how to ensure they load properly ...

htmlcsssvg

How to adjust transparency in Three.js objects

Currently, I am developing a scene where certain elements are loaded from a JSON file. While I am able to toggle the visibility of each individual object, I now find myself wanting to adjust the opacity/transparency of an individual object. The objects in ...

javascript3dthree.js

Using window.open in Google Chrome results in multiple tabs being opened instead of just one

I have a dynamic input field with a search button. Initially, only one tab is opened when I click the button. But after saving and clicking it again, multiple tabs open for the same URL. The number of tabs is equal to the number of dynamic input fields cre ...

javascriptjquerydjangodynamicwindow

Creating a straightforward CSS design that stretches to fit the entire viewport dimension

I am attempting to create a simplistic layout using HTML/CSS, as depicted in the wireframe below: /------------------------------------------\ | | | header div | | ...

htmlcssxhtml

Screen remains blank as the React webpage fails to load

Hello, I am having issues with my React page not showing up. Can someone please review my code to see if there are any errors? Here is the edited program: index.html <!doctype html> <html lang="en"> <head> <meta charset ...

htmlreactjstypescriptreact-typescript

Only apply prevent default on specific levels for better control

I am currently working on a menu with submenus. I am facing an issue where when I click on a top-level menu item, I need to use prevent default because they are anchor tags. However, for the submenu items, I do not want to prevent default behavior. I am st ...

javascriptjqueryhtmlcss

JavaScript table supported by a REST API

Issue at hand: I am in search of a table component that seamlessly integrates with my web application. The challenge lies in connecting the existing REST endpoints to the table for data retrieval, whether it be paginated or not. Adjusting the endpoints t ...

javascriptjqueryjsonrest

Converting SVG to PNG image directly in the browser (compatible with all browsers, including Internet Explorer)

I am currently working with Highcharts and I have a need to convert all the charts displayed on the webpage into images so that I can send them to my server for merging with a master export Excel file. The Excel file already contains some tables and pivot ...

javascriptjquerysvghighcharts

What is the best way to layer four images in a 2x2 grid over another image using CSS as the background

I am attempting to place 4 images of the same size on a 5th image defined as the background. Currently, it looks like this: It works perfectly when the height is fixed, but in my case, the height may vary causing this issue: This problem isn't surp ...

javascriptcss