Hide table column using JavaScript

Meandering Meerkat answered on January 5, 2022 Popularity 9/10 Helpfulness 4/10

answer Hide table column using JavaScript

related hide table column js

Hide table column using JavaScript

Comment

<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>

Popularity 9/10 Helpfulness 4/10 Language html

Source: dotnetlearners.com

Tags: hide html javascript using

Link to this answer
Share Copy Link

Contributed on Jan 05 2022

Meandering Meerkat

0 Answers Avg Quality 2/10

Closely Related Answers

hide table column js

Comment

<html>
  <head>
    <title>Hide table column using JavaScript</title>
  </head>
  <body>
    <table id="id_of_table" border="1">
      <col class="col1" />
      <col class="col2" />
      <col class="col3" />
      <col class="col4" />
      <tr>
        <td colspan="4">
          <table>
            <tr>
              <td></td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td>2</td>
        <td>two</td>
        <td>deux</td>
        <td>zwei</td>
      </tr>
      <tr>
        <td>3</td>
        <td>three</td>
        <td>trois</td>
        <td>drei</td>
      </tr>
      <tr>
        <td>4</td>
        <td>four</td>
        <td>quattre</td>
        <td>vier</td>
      </tr>
      <tr>
        <td>5</td>
        <td>five</td>
        <td>cinq</td>
        <td>fÜnf</td>
      </tr>
      <tr>
        <td>6</td>
        <td>six</td>
        <td>six</td>
        <td>sechs</td>
      </tr>
    </table>
    <button id="btnHide">hide French</button>
    <button id="btnShow">show French</button>
  </body>
  <script language="javascript">
    function show_hide_column(col_no, do_show) {
      const table = document.getElementById("id_of_table");
      const column = table.getElementsByTagName("col")[col_no];
      if (column) {
        column.style.visibility = do_show ? "" : "collapse";
      }
    }

    const btnHide = document.getElementById("btnHide");
    btnHide.addEventListener("click", () => show_hide_column(2, false));

    const btnShow = document.getElementById("btnShow");
    btnShow.addEventListener("click", () => show_hide_column(2, true));
  </script>
</html>

Popularity 8/10 Helpfulness 6/10 Language html

Source: Grepper

Tags: hide html

Link to this answer
Share Copy Link

Contributed on Nov 25 2022

Niraj Kafle

0 Answers Avg Quality 2/10

Hide table column using JavaScript

Contents

More Related Answers

Hide table column using JavaScript

Closely Related Answers

hide table column js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.