javascript - 如何使用jquery隐藏表格元素并隐藏bootstrap类

Question

我使用这个 HTML 代码:

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

只要"type_new" == 3的值我想显示隐藏的 th 和隐藏的 td 元素。

要使用它，我已经尝试使用 jquerys Toogle 函数:

这是工作示例

$( "#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');
    }
});

知道为什么它只使第一个 TH 元素可见吗？

$("#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>

Answer 1

您为所有 tds 提供相同的 id，而不应将其设为一个类。一个 id 应该对应一个元素。我已对您的代码进行了更改，请参阅下面是否是您正在寻找的内容:

    <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');
    }
});

演示 fiddle : https://jsfiddle.net/bxkgmwhy/1/