高级 jQuery-4

look_w

第二个示例 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>