특정 열의 내용으로 테이블 내용을

Question

결국 하나의 열, "이름"의 값만 정렬 할 수 있도록 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로 내가 이름 열에서 모든의에 클래스 "tdOfName"를 적용하려고이

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

처럼 보인다

하지만 이후이 제 기능 지금까지 모습입니다 변수가 정의되지 않았기 때문에 정렬이 작동을 멈췄다.

어떻게 해결할 수 있습니까? 먼저

Answer 1

, HTML 코드에 대한 두 가지 : 조언

1. 먼저 조각, JQuery와 행 선택기를 단순화하기 위해 테이블에 thead 및 tbody를 추가 (어쨌든, 좋습니다).

2. 머리글에 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/

이게 니가 찾고있는거야?

도움이되기를 바랍니다.