JQuery,在表列中查找结果

时间:2013-04-15 13:35:32

标签: javascript jquery

我试图在表格列中找到结果,如果它在我的函数中设置,其中大部分是由其他人设置的,我只是添加了一些额外内容,我的最后一个是仅按名称设置搜索1列the the,但当前版本的唉根本没有任何事情发生:|

感谢您的帮助

用法
<a href='javascript:searchTable("Bob", "table",1,"Name");'>Test</a> 
    <table id="table" class="table">
       <thead>
          <tr>
            <th id="blank">&nbsp;</th>
            <th id="Name">Name</th>
            <th id="Dept">Department</th>
            <th id="JobTitle">Job Title</th>
          </tr>
       </thead>
       <tbody>
          <tr>
            <td>&nbsp;</td>
            <td>Bob</td>
            <td>IT</td>
            <td>IT Support</td>
          </tr>    
          <tr>
            <td>&nbsp;</td>
            <td>Fred</td>
            <td>Finance</td>
            <td>Finance Man</td>
          </tr>     
       </tbody>
   </table
功能
function searchTable(inputVal, tablename,starts, column) {
    var table = $(tablename);
    table.find('tr:not(.header)').each(function (index, row) {
        if (column != '') {
            //Columnname
            var Cells = $(row).find('td').eq(column);
        } else {
            //AllCells
            var Cells = $(row).find('td');
        }
        if (Cells.length > 0) {
            var found = false;
            Cells.each(function (index, td) {
                if (starts == 1) {
                    var regExp = new RegExp((starts ? '^' : '') + inputVal, 'i');
                } else {
                    var regExp = new RegExp(inputVal, 'i');
                }

                if (regExp.test($(td).text())) {
                    found = true;
                    return false;
                }
            });
            if (found == true) $(row).show().removeClass('exclude'); else 
            $(row).hide().addClass('exclude');
            }
        });
    }

2 个答案:

答案 0 :(得分:0)

我不确定您要控制的是什么,但您可以使用它循环遍历行并获取单元格的值。

$("#table>tbody>tr").each(function(){
 var name= $(this).children("td").eq(1).html();//Name
 var department=  $(this).children("td").eq(2).html();//Department
 var jobTitle=  $(this).children("td").eq(2).html();//Job Title
  alert(name);
});

http://jsbin.com/uvefud/1/edit

编辑: 您可以尝试使用此searchTable函数。

function searchTable(name,tableName,row,column){

var $Tds= $("#"+tableName+">tbody>tr").eq(row-1).children("td");
 if(column=="Name"){
    $Tds.eq(1).html(name);
  }
  else if(column=="Dept"){
    $Tds.eq(2).html(name);
  }
  else if(column=="JobTitle"){
    $Tds.eq(3).html(name);
  }

}

http://jsfiddle.net/W9zpq/2/

用法:这会将第二行tbody的名称列更新为“Bob”

searchTable("Bob", "table",2,"Name")

答案 1 :(得分:0)

当您将column作为字符串传递时,您需要获取相应的元素索引:

var Cells = $(row).find('td:eq(' + $('#' + column).index() + ')');

以上假设您根据id进行匹配,如果您根据<th>中的文字进行匹配,则可以使用:contains选择器:

$(row).find('td:eq(' + $(table.prop('id') + ' th:contains(' + column + ')').index() + ')');

如果你可以控制和修改函数调用,最好的办法就是将元素索引直接传递给函数:

javascript:searchTable("Bob", "table", 1, 1); <-- Would be the "Name" column

这样,您就不必进行上述任何操作。

顺便说一句,根据您的评论,您的表格选择器不正确,不确定这是否只是您的错误?

var table = $(tablename);

应该是:

var table = $('#' + tablename);