How to define the number of columns a cell should span using HTML5 ?

How to find the sixth cell (second row and third column ) of a 3x3 table in jQuery ?

Last Updated : 18 Apr, 2021

In this article, we will see how to get the sixth cell of a 3x3 table in jQuery. To find the nth-child of an element, we can use the nth-child selector of jQuery.

Approach: Sixth cell of a 3x3 table can be found using the following jQuery call:

$('#table1 tr:nth-child(2) td:nth-child(3)').text();

If the table has column headers, the sixth cell can be found using the following call.

$('#table1 tr:nth-child(3) td:nth-child(3)').text();

HTML code: Please note that the nth-child selector's index is 1 based.

HTML

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnGetValue').click(function () {
                $('#value').text($(
'#table1 tr:nth-child(3) td:nth-child(3)').text());
            });
        });
    </script>
</head>

<body style="text-align:center">
    <table id="table1" style=
        "width:100%" border="1">
        <tr>
            <th>
                Header1
            </th>
            <th>
                Header2
            </th>
            <th>
                Header3
            </th>
        </tr>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
        </tr>
        <tr>
            <td>Cell 4</td>
            <td>Cell 5</td>
            <td>Cell 6</td>
        </tr>
    </table>
    <br>

    <input type="button" 
        value="Get 6th Cell's value" 
        id="btnGetValue" />
        
    <span id="value"></span>
</body>

</html>

Output: We see the following web page.

Before Click:

After Click:

You see the sixth cell's value next to the button (highlighted in red rectangle)

After click output

How to define the number of columns a cell should span using HTML5 ?

S

syedfaisalmca

Improve

Article Tags :

Similar Reads

How to Count Number of Rows and Columns in a Table Using jQuery?

Given an HTML document containing a table, the task is to count the number of rows and columns in that table using JQuery. There are a few methods available in jQuery to count the number of rows and columns in an HTML table. Table of Content By iterating through the rows and columnsBy using the leng

How to set the number of rows a table cell should span in HTML ?

In this article, we will show how multiple rows are spanned by a table header cell. The task can be done by using the rowspan attribute while using the <th> tag. This property is used to merge one or more cells as well as increase the height of the single header cell automatically. Syntax:

How to select all even/odd rows in table using jQuery ?

In this article, we will see how to make a table by selecting the alternate rows i.e. selecting the even or odd rows by clicking on the respective buttons. This feature can be useful at the time of selecting the specific data/elements of either of the rows or to highlight the table of data for displ

How to Add Edit and Delete Table Row in jQuery ?

In this article, we will create an example of how to add, edit and delete table rows in jQuery. For creating this functionality we need to know about the basics of the HTML table, jQuery basic functionality. Table row: An HTML table is a combination of rows and columns. The table row is in the horiz

How to define the number of columns a cell should span using HTML5 ?

This article will show you how a column can be made to span over multiple cells. This is done using the colspan attribute when using the <td> tag. This allows the single table cell to span the width of more than one cell or column. It provides similar functionality to the â€œmerge cellâ€ function

How to show contents of selected row of a table in Bootstrap model using jQuery ?

The task is to fetch data from a row of the table and show them on the bootstrap model. Bootstrap model: The Modal component is a kind of dialog box or a popup window that is displayed on top of the present page, on clicking the provided button on the page. However, the Model automatically closes on

How to select the last row of a table using jQuery ?

Given an HTML table and the task is to select the last row of the table with the help of jQuery. There are two approaches that are discussed below with the proper example. Approach 1: First, select the table by its ID. Use find() method to find the all table rows of the table. Use last() method to g

How to add table row in a table using jQuery?

In jQuery, adding a row to a table refers to dynamically inserting a new table row (<tr>) into an existing HTML table. This functionality allows developers to update and manage table content in real-time, enhancing interactivity and user experience without reloading the page.Steps to add table

How to Delete All Table Rows Except First One using jQuery?

To delete all table rows except the first one using jQuery, you can target the rows and remove them while keeping the first row intact.ApproachFirst, we create a table using <table> tag and add a button containing btn id. When a user clicks on the button, then the jQuery function is called. Th

How to insert new row at a certain index in a table in jQuery ?

Given an HTML document containing a table. The task is to insert a new row in that table at a certain index using JQuery. Approach: Store the table column value <td> element into the variable. Then use eq() and after() method to insert the row in a table. Example 1: In this example, the row is