按特定列內容的表格

我有一張表格，最終應該有5列，我希望能夠排序，但只能查看一列「Name」的值。這是我的函數看起來像至今：按特定列內容的表格

function RenderResultsByName() { 
    //Declaration of variables 
    var nameInput, nameFilter, ul, li, a, i; 

    //Set the variables accorging to matching id's 

    //Name 
    nameInput = document.getElementById('nameInput'); 
    nameFilter = nameInput.value.toUpperCase(); 

    ul = document.getElementById("UL"); 
    li = document.getElementsByTagName('tr'); 

    console.log(li[0]); 

    //Loop trough items and hide those who don't match the query--> 
    for (i = 0; i < li.length; i++) { 
     a = li[i].getElementsByTagName("td")[0]; 
     if (a.innerHTML.toUpperCase().indexOf(nameFilter) > -1) { 
      li[i].style.display = ""; 
     } 
     else { 
      li[i].style.display = "none"; 
     } 
    } 
}

的HTML看起來像這樣

<div class="row"> 
<div class="col-md-3"> 
    <label>Namn: </label><br /> 
    <input type="text" id="nameInput" onkeyup="RenderResultsByName()" placeholder="Sök efter namn..." /> <br /> <br /> 
</div> 
</div> 

<br /><br /> 

<table id="UL" class="table table-bordered"> 
<tr> 
    <th>Name</th> 
    <th>Yada</th> 
    <th>Yada</th> 
    <th>Yada</th> 
    <th>Yada</th> 
</tr> 

@foreach (var item in Model) 
{ 
    <tr> 
     <td>@item.visitor.FullName</td> 
    </tr> 
} 
</table>

我試圖在名稱列在所有的應用類「tdOfName」，但經過該排序停止工作，因爲變量變得未定義。

你會如何解決這個問題？

來源

2017-10-09 Magda Poppins

你可以添加html代碼嗎？公平地說，你的循環似乎不會按名稱排序。 –

創建一個值的數組，然後使用數組方法來完成您的任務（如過濾器和排序）。 – evolutionxbox

首先，爲您的HTML代碼兩件事情：

首先一個忠告，加thead和tbody到表中，以簡化的jQuery行選擇（並且是一個很好的做法，無論如何）。

您正在頭排創建5列，其餘只有一列。你必須添加其餘的或設置一個colspan。

<table id="UL" class="table table-bordered"> 
    <thead> 
    <tr> 
     <th>Name</th> 
     <th>Yada</th> 
     <th>Yada</th> 
     <th>Yada</th> 
     <th>Yada</th> 
    </tr> 
    <thead> 

    <tbody> 
    @foreach (var item in Model) { 
     <tr> 
     <td>@item.visitor.FullName</td><td></td><td></td><td></td><td></td> 
     </tr> 
    } 
    <tbody> 
</table>

然後，你說的那種，但你的函數試圖顯示在值的輸入出席/隱藏行。我看不到任何排序的跡象。如果你想要的是，在第一列中的輸入值顯示/隱藏行，你可以用這個簡化它...

jQuery.expr[':'].icontains = function(a, i, m) { 
    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 
}; 

$('input#nameInput').on('keyup',function() { 
    $('table#UL tbody tr').hide().filter(':has(td:first:icontains('+this.value+'))').show(); 
});

這裏有一個小提琴例子... https://fiddle.jshell.net/rigobauer/4rzf4wt7/

這是你在找什麼？

我希望它有幫助。

來源

2017-10-09 11:30:10

按特定列內容的表格

回答

相關問題