如何使用jquery隐藏表元素并隐藏引导类

时间：2017-03-21 11:10:34

标签： javascript jquery html twitter-bootstrap

我使用此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的价值一旦我想显示隐藏的＆amp;隐藏的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元素可见吗？

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

3 个答案:

答案 0 :(得分：2)

你给所有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');
    }
});

演示小提琴： https://jsfiddle.net/bxkgmwhy/1/

答案 1 :(得分：0)

通过你的html文档，ID应该是唯一的。由于您使用了ID，$('#srv_new)只会返回第一个元素，而您只能在th个元素上看到结果

利用课程

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

答案 2 :(得分：0)

首先在<tr>头部添加ID并删除.hide类。这不是必需的，但如果您在.hide()和.show()函数中使用jQuery构建，则不需要它。

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

然后在jQuery函数中，遍历<tr>中的元素并查找具有.hide类的元素。我再次建议您使用默认的.hide()和.show()函数。

.find()功能会搜索与您投入的内容相匹配的元素（我相信只有第一个孩子，但不要引用我的内容）。因此，它会搜索<th>的所有<tr id="table-head">个孩子。<th>。

然后我们需要检查这些.not(":visible")是否可见，因为如果它们已经存在，那么请不要打扰。所以我们添加display: none;告诉jQuery查找不可见的项（确保它由visibility: none;工作并确保元素显示为block / inline-block。.each(function(index, element)赢得＆ ＃39; t影响可见性，但你可以自己做一些google searc。

之后我们使用<th>创建一个遍历我们找到的元素的循环，其中元素是我们需要执行编辑的$(element)。在函数中，我们可以通过执行.show()使用jQuery简单地选择该元素，其中element是函数中传递的变量。之后，我们调用.prop("disabled", true)方法来显示元素。

然后使用$("#destination_new)函数设置所选元素的disabled属性。在我们的例子中是$("#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); }); } }); 。

在else语句中我们做同样的事情，但反之亦然。如果你简单地看一下，我相信你会明白。

$("element")

请记住，使用jQuery的选择器.each()，您只需选择一个元素。因此，通过告诉选择器抓取带有id的内容，它只会抓取一个元素。使用$('.X').addClass('blue'); 功能执行多个操作。祝你好运，希望这有帮助！

相关问题
最新问题