特定の列ごとのテーブルの内容

Question

最終的に1つの列 "名前"の値だけを並べ替えることができるようにする5つの列が必要なテーブルがあります。これは私の機能は、これまでに次のようになります。

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」を適用しようとしましたが、後のように見えます変数が定義されていないためにソートが機能しなくなったことを示します。

どうすれば解決できますか？まず

Answer 1

、HTMLコードのための2つのこと：助言の

1. 最初の作品、jqueryの行セレクターを簡素化するために、あなたのテーブルにtheadとtbodyを追加（と、とにかく、良い習慣です）。

2. ヘッド行に5列、残りの1列のみを作成しています。あなたは残りの部分を追加したり、列を設定する必要があります。

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

これはあなたが探しているものですか？

私はそれが役に立ちそうです。