电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 高级 jQuery-4 [打印本页]

作者: look_w 时间: 2018-8-23 09:21 标题: 高级 jQuery-4

第二个示例 Web 应用程序我将使用另一个小部件解决本文的最后 3 个问题，并且在深入研究其代码之前展示和解释它。这个 401k 小部件并不陌生，因为您已经在前面的文章见过它（参见部分获取这些文章的链接）。不过，这回有个微妙的不同之处，因为我在同一个页面上两次添加了这个小部件。它被添加到两个不同的表中。这将带来几个有趣的地方。图 3 显示了这个小部件：
图 3. 401k 小部件

在这个小部件中，我正在做几件事情。第一件是计算文本字段之和并确定它们是否为 100。如果它们的和不为 100，我将向用户显示一个错误，提示他们没有正确使用该小部件。第二，我在每个选项获取输入之后对选项进行排序。通过这种方式，百分比最高的投资分配将一直出现在表的顶部。这可以在图 3 中看到，它按百分比对选项进行排序。最后，为了让它更酷，我添加了一些条带。
用于生产这个小部件的 HTML 代码出奇地简单。清单 8 详细地显示了这个小部件。
清单 8. 生成 401k 小部件的 HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<p><table width=300 class="percentSort" cellpadding=0 cellspacing=0>
<tbody>
  <tr><td>S&P 500 Index</td>
  <td><input type=text> %</td></tr>
  <tr><td>Russell 2000 Index</td>
  <td><input type=text> %</td></tr>
  <tr><td>MSCI International Index</td>
  <td><input type=text> %</td></tr>
  <tr><td>MSCI Emerging Market Index</td>
  <td><input type=text> %</td></tr>
  <tr><td>REIT Index</td>
  <td><input type=text> %</td></tr>
</tbody>
<tfoot>
</tfoot>
</table>

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)