Menu ▼

Previous Next

Hide table column using JavaScript :

Example:
-------------
Enter Column Number :
(Enter column number in the Textbox and click on Hide Example:1,2,3,..)

Heading 1 Heading 2 Heading 3 Heading 4
R1C1 R1C2 R1C3 R1C4
R2C1 R2C2 R2C3 R2C4
R3C1 R3C2 R3C3 R3C4
R4C1 R4C2 R4C3 R4C4


Code Sample :

<html>

<head>

    <title>Hide table column using JavaScript</title>

    <script language="javascript">

        function hideCol() {

            var col = document.getElementById("txtCol").value;

            if (isNaN(col) || col == "") {

                alert("Invalid Column");

                return;

            }

            col = parseInt(col, 10);

            col = col - 1;

            var tbl = document.getElementById("tblMain");

            if (tbl != null) {

                if (col < 0 || col >= tbl.rows.length - 1) {

                    alert("Invalid Column");

                    return;

                }

                for (var i = 0; i < tbl.rows.length; i++) {

                    for (var j = 0; j < tbl.rows[i].cells.length; j++) {

                        tbl.rows[i].cells[j].style.display = "";

                        if (j == col)

                            tbl.rows[i].cells[j].style.display = "none";

                    }

                }

            }

        }

    </script>

</head>

<body>

    <center>

        Enter Column Number :

        <input type="text" id="txtCol" /><input type="button" value="Hide" onclick="hideCol();" />

        <br />

        (Enter column number in the Textbox and click on Hide Example:1,2,3,..)

        <br />

        <br />

    </center>

    <table align="center" id="tblMain" border="1" style="cursor: pointer;">

        <tr>

            <td>

                Heading 1

            </td>

            <td>

                Heading 2

            </td>

            <td>

                Heading 3

            </td>

            <td>

                Heading 4

            </td>

        </tr>

        <tr>

            <td>

                R1C1

            </td>

            <td>

                R1C2

            </td>

            <td>

                R1C3

            </td>

            <td>

                R1C4

            </td>

        </tr>

        <tr>

            <td>

                R2C1

            </td>

            <td>

                R2C2

            </td>

            <td>

                R2C3

            </td>

            <td>

                R2C4

            </td>

        </tr>

        <tr>

            <td>

                R3C1

            </td>

            <td>

                R3C2

            </td>

            <td>

                R3C3

            </td>

            <td>

                R3C4

            </td>

        </tr>

        <tr>

            <td>

                R4C1

            </td>

            <td>

                R4C2

            </td>

            <td>

                R4C3

            </td>

            <td>

                R4C4

            </td>

        </tr>

    </table>

</body>

</html>

 

 

Previous Next




Search dotnetlearners.com