jQuery的搜索工作的一列，而不是整個HTML表

只是想添加搜索的可能性使用jQuery加載表，但下面的代碼僅適用於第一列。我想讓它適用於所有的細胞。能否請您檢查代碼，並幫助我找到我的錯誤：jQuery的搜索工作的一列，而不是整個HTML表

這裏是我的html代碼：

<span id="search"></span>

這裏是我的js代碼：

$("#search").on("keyup", function() { 
    var value = $(this).text(); 

    $("table tr").each(function (index) { 
     if (index != 0) { 

      $row = $(this); 

      $row.each(function() { 

       var cell = $row.find("td").text(); 

       if (cell.indexOf(value) != 0) { 
        $(this).hide(); 
       } else { 
        $(this).show(); 
       } 
      }); 
     } 
    }); 
});

來源

2014-10-04 EducateYourself

不應該這'VAR值= $（本）的.text（）;'是這樣'var value = $（this）.val（）;'？ '＃search'是什麼樣的元素？ – melancia 2014-10-04 09:17:24

它應該是文本（），＃搜索是元素 – EducateYourself 2014-10-04 09:24:06

所以我需要審查我的答案。詢問時你應該清楚。 – melancia 2014-10-04 09:29:04

我不認爲你需要做$ row.each，你在每個是已經，嘗試每一個列上，而不是：

$("#search").on("keyup", function() { 
    var value = $(this).text(); 

    $("table tr").each(function (index) { 
     if (index != 0) { 

      $row = $(this); 

      $row.find("td").each(function() { 

       var cell = $(this).text(); 

       if (cell.indexOf(value) != 0) { 
        $(this).hide(); 
       } else { 
        $(this).show(); 
       } 
      }); 
     } 
    }); 
});

編輯：

http://jsfiddle.net/rn8dsnwm/2/

$("#search").keyup(function() { 
    var value = $(this).val(); 

    if (value.length){ 
     $("table tr").each(function (index) { 
      if (index != 0) { 

       $row = $(this); 

       $row.find("td").each(function() { 

       var cell = $(this).text(); 

       if (cell.indexOf(value) < 0) { 
        $row.hide(); 
       } else { 
        $row.show(); 
        return false; //Once it's shown you don't want to hide it on the next cell 
      } 

     }); 
    } 
}); 
} 
else{ 
    //if empty search text, show all rows 
    $("table tr").show(); 

} 
});

來源

2014-10-04 09:41:45 artm

非常感謝。你的代碼工作正常。唯一的問題是我想要顯示或隱藏整行。我嘗試將** $（this）.show（）; **改爲** $（this）.closest（「tr」）。show（）; **但它不起作用。請問你能幫幫我嗎。 – EducateYourself 2014-10-04 09:53:53

你已經有$行作爲變量，試圖隱藏並顯示。 if（...）$ row.hide（）; else $ row.show（）; – artm 2014-10-04 09:55:24

這很奇怪，但它沒有起作用。我還發現** cell.indexOf（value）！= 0 **僅檢查單元格文本的第一個字符 – EducateYourself 2014-10-04 10:02:50

我認爲你有一個邏輯嘗試循環訪問一行的單元格時出現問題。

這應該工作：

$("#search").on("keyup", function() { 
    var value = $(this).val(); 

    $("table tr:not(:first-of-type)").each(function (ix, el) { 
     $row = $(this); 
     $cells = $row.find('td'); 

     $cells.each(function (ix2, el2) {    
      var cell = $(this).text(); 

      $row.toggle(cell.indexOf(value) >= 0); 
     }); 
    }); 
});

Demo

來源

2014-10-04 09:22:25 melancia

嘗試這一個爲所有TR元素：

var $rows = $('table tr'); 
$('#search').keyup(function() { 
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); 

    $rows.show().filter(function() { 
     var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
     return !~text.indexOf(val); 
    }).hide(); 
});

外觀的示例http://jsfiddle.net/921dpr7a/

來源

2014-10-04 11:08:21

jQuery的搜索工作的一列，而不是整個HTML表

回答

相關問題