Question

我有一个表最终应该有5列，我希望能够排序只有一列的值，＆＃34; Name＆＃34;。这就是我的功能到目前为止的样子：

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>

我试图申请一个班级＆＃34; tdOfName＆＃34;在Name列中的所有＆＃39;但之后排序停止工作，因为变量未定义。

你会如何解决这个问题？

Answer 1

首先，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/

这是你要找的吗？

我希望它有所帮助。

由特定列内容组成的表

1 个答案: