CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
wichtel
wichtel

Reputation: 191

How to hide table elements using jquery and hide class of bootstrap

I use this HTML code:

<table class="table table-bordered">
<thead>
    <tr>
        <th>Host</th>
        <th>TTL</th>
        <th class="hide" id="srv_new">new th1</th>
        <th class="hide" id="Th1">new th2</th>
        <th class="hide" id="Th2">new th3</th>
        <th class="hide" id="Th3">new th4</th>
        <th class="hide" id="Th4">new th5</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            <input type="text" name="host_new" placeholder="subdomain">
        </td>
        <td>
            <input type="numeric" name="ttl_new" value="3600">
        </td>
        <td>
            <select name="type_new" id="type_new">
                <option value="1">sample text</option>
                <option value="2">sampe text</option>
                <option value="3">sample text</option>
            </select>
        </td>
        <td>
            <input type="text" name="destination_new" placeholder="1.3.3.7">
        </td>
        <td class="hide" id="Td1">
            <select class="form-control" name="srv_type" id="srv_type">
                <option value="0">Minecraft</option>
            </select>
        </td>
        <td class="hide" id="Td2">
            <select class="form-control" name="srv_protocol" id="srv_protocol">
                <option value="0">UDP</option>
                <option value="1">TCP</option>
            </select>
        </td>
        <td class="hide" id="Td3">
            <input class="form-control" type="numeric" name="srv_priority" value="0">
        </td>

        <td class="hide" id="Td4">
            <input class="form-control" type="numeric" name="srv_weight" value="0">
        </td>

        <td class="hide" id="Td5">
            <input class="form-control" type="numeric" name="srv_port" placeholder="1234">
        </td>
    </tr>
</tbody>

As soon as the value of "type_new" == 3 I would like to show the hidden th & hidden td elements.

To use this I've already tried to use jquerys toogle function:

Here is the working sample

$( "#type_new" ).change(function () {
  console.log("changed");
    if (this.value == 3) {
      $("#srv_new").removeClass('hide');
      $('#destination_new').attr("disabled", true);
    }
    else{
      $("#srv_new").addClass('hide');
      $('#destination_new').removeAttr('disabled');
    }
});

Any idea why it only makes the first TH element visible?

$("#type_new").change(function() {
  console.log("changed");
  if (this.value == 3) {
    $("#srv_new").removeClass('hide');
    $('#destination_new').attr("disabled", true);
  } else {
    $("#srv_new").addClass('hide');
    $('#destination_new').removeAttr('disabled');
  }
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Jquery library for bootstrap-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<table class="table table-bordered">
  <thead>
    <tr>
      <th>Host</th>
      <th>TTL</th>
      <th class="hide" id="srv_new">new th1</th>
      <th class="hide" id="Th1">new th2</th>
      <th class="hide" id="Th2">new th3</th>
      <th class="hide" id="Th3">new th4</th>
      <th class="hide" id="Th4">new th5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" name="host_new" placeholder="subdomain">
      </td>
      <td>
        <input type="numeric" name="ttl_new" value="3600">
      </td>
      <td>
        <select name="type_new" id="type_new">
                <option value="1">sample text</option>
                <option value="2">sampe text</option>
                <option value="3">sample text</option>
            </select>
      </td>
      <td>
        <input type="text" name="destination_new" placeholder="1.3.3.7">
      </td>
      <td class="hide" id="Td1">
        <select class="form-control" name="srv_type" id="srv_type">
                <option value="0">Minecraft</option>
            </select>
      </td>
      <td class="hide" id="Td2">
        <select class="form-control" name="srv_protocol" id="srv_protocol">
                <option value="0">UDP</option>
                <option value="1">TCP</option>
            </select>
      </td>
      <td class="hide" id="Td3">
        <input class="form-control" type="numeric" name="srv_priority" value="0">
      </td>

      <td class="hide" id="Td4">
        <input class="form-control" type="numeric" name="srv_weight" value="0">
      </td>

      <td class="hide" id="Td5">
        <input class="form-control" type="numeric" name="srv_port" placeholder="1234">
      </td>
    </tr>
  </tbody>

Upvotes: 0

Views: 791

Answers (3)

Bram
Bram

Reputation: 3264

First add an ID to the <tr> head and remove the .hide class. This is not neccesary, but you don't need it if you use jQuery's build in .hide() and .show() functions.

<thead>
    <tr id="table-head">
        <th>Host</th>
        <th>TTL</th>
        <th id="srv_new">new th1</th>
        <th id="Th1">new th2</th>
        <th id="Th2">new th3</th>
        <th id="Th3">new th4</th>
        <th id="Th4">new th5</th>
    </tr>
</thead>

Then in the jQuery function, loop through the elements in the <tr> and find elements that have the .hide class. Again, I suggest you use the default .hide() and .show() functions.

The .find() function searches for elements that match what you put into it (I believe only to the first child, but don't quote me on that). So it's going to search for every <th> that is a child of <tr id="table-head">.

Then we need to check if those <th> are visible or not, because if they already are, then don't bother. So we add the .not(":visible") which tells jQuery to look for items that are invisible (make sure this works by display: none; and make sure the element is shown as block/inline-block. visibility: none; won't affect the visibility, but you will be able to do some own google searc on that).

After that we use the .each(function(index, element) to create a loop through those elements we found, in which element is the <th> which we need to perform edits on. In the function we can then simply select that element using jQuery by doing $(element) where element is the variable passed in the function. After that we call the .show() method to show the element.

Then using the .prop("disabled", true) function we set the disabled property of the selected element. In our case the $("#destination_new).

In the else statement we do the same thing, but then the other way around. I'm sure you'll understand if you take a brief look at it.

$("#type_new").change(function() {
    console.log("changed");
    if(this.value == 3) {
        $("#table-head").find("th").not(":visible").each(function(index, element) {
            $(element).show();
        });
        $("#destination_new").prop("disabled", true);
    } else {
        $("#table-head").find("th").is(":visible").each(function(index, element) {
            $(element).hide();
            $("#destination_new").prop("disabled", false);
        });
    }
});

Remember, using jQuery's selector $("element") you only pick one element. So by telling the selector to grab something with an id, it will only grab a single element. Use the .each() function to do multiple. Good luck, hope this helped!

Upvotes: 0

Shubham Khatri
Shubham Khatri

Reputation: 281646

Ids are meant to be unique though your html document. Since you make use of ids, $('#srv_new) will only return you the first element and henc eyou see the result on only th elements

Make use of class

<table class="table table-bordered">
<thead>
    <tr>
        <th>Host</th>
        <th>TTL</th>
        <th class="hide srv_new">new th1</th>
        <th class="hide" id="Th1">new th2</th>
        <th class="hide" id="Th2">new th3</th>
        <th class="hide" id="Th3">new th4</th>
        <th class="hide" id="Th4">new th5</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            <input type="text" name="host_new" placeholder="subdomain">
        </td>
        <td>
            <input type="numeric" name="ttl_new" value="3600">
        </td>
        <td>
            <select name="type_new" id="type_new">
                <option value="1">sample text</option>
                <option value="2">sampe text</option>
                <option value="3">sample text</option>
            </select>
        </td>
        <td>
            <input type="text" name="destination_new" placeholder="1.3.3.7">
        </td>
        <td class="hide" id="Td1">
            <select class="form-control srv_new" name="srv_type" >
                <option value="0">Minecraft</option>
            </select>
        </td>
        <td class="hide" id="Td2">
            <select class="form-control" name="srv_protocol" id="srv_protocol">
                <option value="0">UDP</option>
                <option value="1">TCP</option>
            </select>
        </td>
        <td class="hide" id="Td3">
            <input class="form-control" type="numeric" name="srv_priority" value="0">
        </td>

        <td class="hide" id="Td4">
            <input class="form-control" type="numeric" name="srv_weight" value="0">
        </td>

        <td class="hide" id="Td5">
            <input class="form-control" type="numeric" name="srv_port" placeholder="1234">
        </td>
    </tr>
</tbody>

JS

$( "#type_new" ).change(function () {
  console.log("changed");
    if (this.value == 3) {
      $(".srv_new").removeClass('hide');
      $('#destination_new').attr("disabled", true);
    }
    else{
      $(".srv_new").addClass('hide');
      $('#destination_new').removeAttr('disabled');
    }
});

Upvotes: 0

maverickosama92
maverickosama92

Reputation: 2725

You are giving same id to all tds instead you should make it a class. One id should be for one element. I have made changes to your code and see below if this is what you are looking for:

    <table class="table table-bordered">
  <thead>
    <tr>
      <th>Host</th>
      <th>TTL</th>
      <th class="hide srv_new">new th1</th>
      <th class="hide srv_new">new th2</th>
      <th class="hide srv_new">new th3</th>
      <th class="hide srv_new">new th4</th>
      <th class="hide srv_new">new th5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>
        <input type="text" name="host_new" placeholder="subdomain">
        </td>
        <td>
        <input type="numeric" name="ttl_new" value="3600">
        </td>
        <td>
            <select name="type_new" id="type_new">
                     <option value="1">sample text 1</option>
                     <option value="2">sampe text 2</option>
                     <option value="3">sample text 3</option>
            </select>
        </td>
        <td>
        <input type="text" name="destination_new" placeholder="1.3.3.7">
        </td>

          <td class="hide srv_new">
            <select class="form-control" name="srv_type" id="srv_type">
              <option value="0">Minecraft</option>
            </select>
          </td>

          <td class="hide srv_new">
            <select class="form-control" name="srv_protocol" id="srv_protocol">
              <option value="0">UDP</option>
              <option value="1">TCP</option>
            </select>
          </td>

          <td class="hide srv_new">
            <input class="form-control" type="numeric" name="srv_priority" value="0">
          </td>

          <td class="hide srv_new">
            <input class="form-control" type="numeric" name="srv_weight" value="0">
          </td>

          <td class="hide srv_new">
            <input class="form-control" type="numeric" name="srv_port" placeholder="1234">
          </td>

    </tr>
  </tbody>
</table>

JS:

$( "#type_new" ).change(function () {
  console.log("changed", this.value);
    if (this.value == 3) {
      $(".srv_new").removeClass('hide');
      $('#destination_new').attr("disabled", true);
    }
    else{
      $(".srv_new").addClass('hide');
      $('#destination_new').removeAttr('disabled');
    }
});

Demo fiddle: https://jsfiddle.net/bxkgmwhy/1/

Upvotes: 2

Related Questions