要从Web表中选择一行?

时间:2017-05-09 07:47:27

标签: javascript jquery indexing datatables

这是我用来从这个特定表中选择一行的代码。以下代码必须选择包含Position-“Engineer”和Age = 34的行。而是选择整个表。有人可以解释为什么会发生这种情况以及可以添加什么来避免它。

$(document).ready(function(){
  var dict={1:"Engineer",3:"34"};
  var a=Object.keys(dict);
    if ( (a+"").match(/^\d+$/) ) 
                {
                  var colidx = Object.keys(dict);
                  $('#example tbody tr').filter(function(idx, ele) {
                    var val = colidx.filter(function(colname, idx) {
                      var colvalue = dict[colname];
                      return ($(ele).find('td').eq(colidx[idx]).text() == colvalue)
                    });
                    return val.length == colidx.length }).css('background-color', 'red');
                }
             else 
                {
                  var coli = {};
                  $('#example thead tr th').filter(function(i, e) {
                    var keycol = e.textContent;
                    var keyval = Object.keys(dict).indexOf(keycol);
                    if (keyval != -1) {
                      coli[keycol] = i;
                    }
                  });
                  var colidx = Object.keys(coli);
                  $('#example tbody tr').filter(function(idx, ele) {
                    var val = colidx.filter(function(colname, idx) {
                      var colvalue = dict[colname];
                      var colindex = coli[colname];
                      return ($(ele).find('td').eq(colindex).text() == colvalue)
                    });
                    return val.length == colidx.length;
                  }).css('background-color', 'red');
      }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example" class="display" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Kavya</td>
      <td>Engineer</td>
      <td>Mumbai</td>
      <td>34</td>
      <td>2011/04/25</td>
      <td>1,20,000</td>
    </tr>
    <tr>
      <td>Archana</td>
      <td>Accountant</td>
      <td>Delhi</td>
      <td>21</td>
      <td>2011/07/25</td>
      <td>170,750</td>
    </tr>
    <tr>
      <td>kranthi</td>
      <td>Technical Author</td>
      <td>Chennai</td>
      <td>23</td>
      <td>2009/01/12</td>
      <td>86,000</td>
    </tr>
    <tr>
      <td>Srija</td>
      <td>Javascript Developer</td>
      <td>Pune</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>433,060</td>
    </tr>
    <tr>
      <td>Priyanka</td>
      <td>Engineer</td>
      <td>Mysore</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>162,700</td>
    </tr>
    <tr>
      <td>Himanshu</td>
      <td>Integration Specialist</td>
      <td>Goa</td>
      <td>51</td>
      <td>2012/12/02</td>
      <td>372,000</td>
    </tr>
    <tr>
      <td>Vishwam</td>
      <td>System Architect</td>
      <td>Jharkand</td>
      <td>69</td>
      <td>2011/04/25</td>
      <td>320,800</td>
    </tr>
    <tr>
      <td>Akhila</td>
      <td>Sales Assistant</td>
      <td>Hyderabad</td>
      <td>59</td>
      <td>2012/08/06</td>
      <td>137,500</td>
   </tr>
    <tr>
      <td>Ashwini</td>
      <td>Javascript Developer</td>
      <td>Bhuvaneshwar</td>
      <td>39</td>
      <td>2009/09/15</td>
      <td>205,500</td>
    </tr>
 
  </tbody>
</table>

1 个答案:

答案 0 :(得分:0)

你可以做这样的事情

更新:使用带索引值和名称值

的dict的示例
$(function() {
  var dict = {0:"Srija", "Office": "Pune", 3: "22"};
  dict = buildIndexValueDictionary(dict);
  runSearchByDict(dict);
});

function buildIndexValueDictionary(dict){
  var header = $("table thead tr th")
  var result = {};
  for (var key in dict) {
    if(isNaN(key)){
      result[getIndexByColumnName(header, key)] = dict[key];
    }
    else{
      result[key] = dict[key];
    }
  }
  return result;
}

function getIndexByColumnName(header, key){
  for(var i = 0; i < header.length; i++){
    if($(header[i]).html() == key){
      return i;
    }
  }
}

function runSearchByDict(dict) {
      var arrayIndex = new Array();
      var arrayValues = new Array();
      for (var key in dict) {
        arrayIndex.push(key);
        arrayValues.push(dict[key]);
      }
      var matchedRows = selectRowByDict(arrayIndex, arrayValues);
      for (var i = 0; i < matchedRows.length; i++) {
        console.log($(matchedRows[i]).html());
      }
}

function selectRowByDict(arrayIndex, arrayValues){
  var result = new Array();
  var rows = $("table tbody tr");
  for(var j = 0; j < rows.length; j++){
    var cells = $(rows[j]).find("td");
    var validRow = true;
    for(var i = 0; i < arrayIndex.length && validRow; i++){
      if($(cells[arrayIndex[i]]).html() != arrayValues[i]){
        validRow = false;
      }
    }
    if(validRow){
      result.push($(rows[j]));
    }
  }
  return result;
}