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

Upon initializing mean.io assetmanager, a javascript error is encountered

I am eager to utilize the MEAN.io stack. I completed all the necessary initialization steps such as creating the folder, performing npm install, and obtaining the required libraries. Currently, in server/config/express.js file, I have the following code: ...

javascriptnode.jsexpressmean-stack

Disabling the current date on date pickers in material ui: A step-by-step guide

In my current React project, I am utilizing material-ui-date-pickers and need to prevent users from selecting today's date. This is important in the context of manufacturing products, managing expiration dates, and handling billing processes. Since a ...

javascriptreactjsdatepickermaterial-ui

Utilizing the onCLICK event handler with numerous parameters

I'm in need of assistance with creating a function that involves multiple variables, preferably at least two... The table I am working with was generated using PHP and MySQL, all IDs were dynamically created which is why I am looking for a way to cap ...

jqueryhtmlajaxfunctiononclick

Duplication of elements in a Meteor and React environment

When it comes to creating a basic Meteor app with React, this is the structure I have put in place: <head> <title>test</title> </head> <body> <div id="render-target"></div> </body> Here is the start ...

htmlmeteorreactjs

When using select2 with AJAX, ensure that the previous response is cleared when the field

Learn how to implement select2 $("#select").select2({ ajax: { url: "/getcity", dataType: 'json', type: 'post', delay: 250, allowClear: false, minimumInputLength: 3, cache: true } }); Every time I focus, ...

jqueryajaxjquery-select2

Tips for effectively managing dynamic xpaths

When conducting a search operation, I am required to select the text that is returned as a result. Each search will produce different xpaths. Below are examples of various xpaths returned during a search: .//*[@id='messageBoxForm']/div/div[1]/di ...

javajavascriptxpathselenium-webdriver

Using jQuery's TabAccordion plugin, you can easily locate the next element in the DOM after the one that was clicked

I am looking to create a functionality where the user can click on a link within a specific area, causing the next element in the DOM with the class .zutdescr to open or close. However, I have been facing difficulties in selecting the correct element for ...

jquerydomtraversaldom-traversaljquery-traversing

Navigating in React: How to Implement the Same Route for Different Scenarios Without Compromising Your Application

I'm facing a frustrating issue while trying to incorporate Redux state management and React Router. Despite searching extensively online, I can't seem to find a solution. My Redux state, named user, stores the details of a logged-in user. Upon l ...

javascriptreactjsreact-routerrouter

There seems to be an issue with Jekyll where it is failing to generate HTML for Markdown pages

I recently delved into the world of Jekyll to transfer my blog over to GitHub Pages. Utilizing a local Jekyll tool (jekyll 3.1.3) with the neo-hpstr-jekyll-theme as a starting template on my Windows system. While the entry point (index.html in root) and p ...

htmlmarkdownjekyll

What could be causing my ajax file uploader to malfunction?

I am currently working on building an AJAX file upload module. Below is a snippet of the code I have been using: //creating a form for uploading files via AJAX FileUploader.prototype.createForm = function() { // creating a new form var form = docu ...

javascriptajaxdomfile-upload

Proceed with another ajax request only when the previous one has been successfully completed and loaded

While scrolling down and loading content into my page, I am facing an issue. The ajax executions load too quickly, causing the subsequent calls to not receive correct information from the first ajax call that is loaded into the DOM. How can I ensure that ...

javascriptphpjqueryajax

Tips for adjusting the size of a box, font, or image when the window is resized

Is it possible to resize a box or font size on window resize without exceeding the default values set in the CSS? For example, in the CSS you might have width:800px; height:600px; for the box. I'm aiming to achieve a similar result to this website wh ...

jqueryresizejquery-animate

Show method created by function, substituting the former element on the display

showButtons(1) will show radio buttons for frame number 1, showButtons(400) will display radio buttons for frame number 400. The current code shows all radio buttons for every frame up to 400 HOWEVER, I am aiming for a single set of radio buttons to start ...

javascriptarraysjsonreactjsradio-button

Trouble retrieving information from database with ajax implementation

i am struggling with the following code: connecting to a database <?php if ($_SERVER['REQUEST_METHOD'] == 'POST') { $conn = new mysqli("localhost", "root", "", "jquery"); if ($conn->connect_error) { die("Connectio ...

phpjquerymysqlajax

Using AngularJS Typeahead with restrictions on $http requests

I have been attempting to restrict the number of results displayed by Angular Bootstrap Typeahead during Async calls, but unfortunately, it does not seem to be functioning as expected. <input type="text" ng-model="asyncSelected" placeholder="Locations ...

javascriptangularjstypeaheadangularjs-bootstrap

Accessing the current state outside of a component using React Context

As I delve into creating a React application, I find myself in uncharted territory with hooks and the new context API. Typically, I rely on Redux for my projects, but this time I wanted to explore the context API and hooks. However, I'm encountering s ...

javascriptreactjsreact-hooksreact-contextreact-state

Exploring the potential of Framework7 in Single Page Applications: optimizing performance by preloading

I'm currently working on developing a web application using Framework7. Framework7 offers routing APIs for navigating between HTML pages. It seems that the pages are loaded dynamically through AJAX requests. I am curious if it is possible to preload ...

javascriptjqueryhtmlcsshtml-framework-7

Experimenting with Selenium to automate processes involving dynamic class attributes

My issue involves a Button class = "searchbar__SearchButton-sc-1546roh-3 searchbar__CancelButton-sc-1546roh-4 glEceZ" I am attempting to locate this element in the browser using return browser.element('button[class^="searchbar__CancelButton-"]&ap ...

javascriptselenium-webdriver

The return value of fs.mkdirSync is undefined

I'm facing a challenge with creating a directory and utilizing that directory as a variable to extract files from zip/rar files. The section of code that is causing an error is shown below: var fileZip = fileName.replace(/^.*[\\\/]/, ...

javascriptnode.jsfs

Choose a looping function in React JS that iterates over an array of objects

I have an array of objects let arr = [0: {received: "Return Received", approved: "Approved", rejected: "Rejected"} 1: {authorized: "Authorized", received: "Return Received"}} I am looking to populate a < ...

javascriptreactjsecmascript-6material-ui