切换表格行的可见性

时间:2016-05-10 19:00:05

标签: jquery arrays html-table

我必须为具有许多选项的表格编写过滤器。

我的方法是:

在获取行的for循环中,将选项的信息推送到数组:

<script>
      if (arrayTypes == null){
        var arrayTypes = [];
        arrayTypes.push("{{option}}");
      }
      else{
        arrayTypes.push("{{option}}");     
      }
</script>

当循环结束时,我有一个数组匹配每个选项的类型和索引位置与表,所以:

表格行,选项|数组索引

第1行,A ........ | [0] = A

第2行,B ........ | [1] = B

第3行,A ........ | [2] = A

第4行,A ........ | [3] = A

等...

现在我试图像这样设置它:

$("#type_filters").on('click',"button[name='hide-A']",function(){
    for(var i=0;i<=arrayTypes.length;i++){
      if(arrayTypes[i] == 'A'){
        $("#my-table tr.option")[i].toggle();
      }
    }
  })

但我在toggle() 一个函数的日志中收到错误。

有人可以帮忙吗?

2 个答案:

答案 0 :(得分:2)

$("#my-table tr.option")[i]不是jQuery对象,因此切换不可用。您将获得特定的HTML元素。要使用切换,你必须将它放回jQuery:

var row = $("#my-table tr.option")[i];
$(row).toggle();

答案 1 :(得分:0)

<!DOCTYPE html>
<html>
  <head>
    <title>FileReader Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/index.js"></script>
        <div id="yay">Good: </div>
    <div id="aww">Bad: </div>
    <script type="text/javascript" charset="utf-8">



    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // device APIs are available
    //
    function onDeviceReady() {
        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
    }

    function gotFS(fileSystem) {
        fileSystem.root.getFile("readme.txt", null, gotFileEntry, fail);
    }

    function gotFileEntry(fileEntry) {
        fileEntry.file(gotFile, fail);
    }

    function gotFile(file){
        readDataUrl(file);
        readAsText(file);
    }

    function readDataUrl(file) {
        var reader = new FileReader();
        reader.onloadend = function(evt) {
            document.getElementById('yay').innerHTML += "Read as data URL";
            document.getElementById('yay').innerHTML += evt.target.result;
        };
        reader.readAsDataURL(file);
    }

    function readAsText(file) {
        var reader = new FileReader();
        reader.onloadend = function(evt) {
            document.getElementById('yay').innerHTML += "Read as text";
            document.getElementById('yay').innerHTML += evt.target.result;
        };
        reader.readAsText(file);
    }

    function fail(evt) {
        document.getElementById('aww').innerHTML += evt.target.error.code;
    }

    </script>
  </head>
  <body>
    <h1>Example</h1>
    <p>Read File</p>
    <div id="yay"></div>
    <div id="aww"></div>
  </body>
</html>