的 DEMO

Question

我有一个巨大的（8 MByte表），我想用一个小的javascript应用程序进行过滤。

逻辑是这样的：

国家
地区
的技能。

我只接受一个国家作为过滤器和一个区域，但只接受几项技能。根据这些信息，我想显示一个包含信息的表格。我不明白的是如何将javascript部分与HTML部分相关联。如何从数组中插入代替HTML的动态信息。（在最终版本中，我将使用json文件替换数组）。

感谢您的支持。

＆＃13;

var country = [
  ["Australia", "AU"],
  ...
  ["Thailand", "TH"]
  ];
var skill = [
  ["AU", "Queensland", "Skill 1"],
  ["AU", "Queensland", "..."],
  ["AU", "Queensland", "Skill n"],
  ["AU", "Western Territory", "Skill 1"],
  ...
  ];
  
  
  
  
 function initCountry(){
   var CountryValue = "AU";
 }
  
  
  
  
  
  function startup() {
     initCountry();
     initRegion();
     initSkill();
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" id="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <link rel="stylesheet" href="cs/jquery.mobile.css" />
    <link rel="stylesheet" href="cs/basis.css" />
	<script src="js/jquery.js" type="text/javascript"></script>
	<script type="text/javascript" charset="utf-8" src="js/jquery.mobile.js"></script>
</head>
<body onload="startup()">
<form id="FilterForm" name="FilterForm">
 <label for="select-custom-20">Countries</label>
    <select name="select-custom-20" id="select-custom-20" data-native-menu="false">
		<option value= "AU">Australia</option>
...
		<option value= "TH">Thailand</option>
    </select>
</div>
<div class="ui-field-contain">
    <label for="select-custom-19">Region:</label>
    <select name="select-custom-19" id="select-custom-19" multiple="multiple" data-native-menu="false">
        <option>Choose options</option>
        <option value="1" selected="selected">Average</option>
        <option value="2">Region 1</option>
        <option value="3">Region 2</option>
        <option value="4">...</option>
		<option value="5">Region n</option>
    </select>
</div>
<div class="ui-field-contain">
    <label for="select-custom-19">Skill:</label>
    <select name="select-custom-19" id="select-custom-19" multiple="multiple" data-native-menu="false">
        <option>Choose options</option>
        <option value="A" selected="selected">Average</option>
        <option value="1">Skill 1</option>
		...
        <option value="T">Skill n</option>
	</select>
</div>
</form>
<table>
<tr>
<td>
Data depending on the filter
</td>
</tr>
</table>
</body>
</html>

＆＃13;

Answer 1

给你的表一个id：

<table id="filteredTable" data-role="table"  data-mode="reflow" class="ui-responsive">
  <thead>
    <tr>
      <th>Country</th>
      <th>Region</th>
      <th>Skill</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

然后，当您拥有已过滤的技能列表时，使用JavaScript循环构建HTML，清空表并附加新内容：

  var rowsHTML = '';
  for (var i=0; i< skill.length; i++){
    rowsHTML += '<tr>';
    rowsHTML += '<td>' + skill[i][0] + '</td>';
    rowsHTML += '<td>' + skill[i][1] + '</td>';
    rowsHTML += '<td>' + skill[i][2] + '</td>';
    rowsHTML += '</tr>';    
  }  
  $("#filteredTable tbody").empty().append(rowsHTML);

如何在jquery mobile

1 个答案:

的 DEMO