html怎么获取文本框html的数据后循环计算并把每个结果输出到下面空白位置

来源：蜘蛛抓取(WebSpider) 时间：2019-06-29 08:27 标签： 文本框html

      在开发WEB前端页面时经常会根据動态的数据加载一些HTML控件，如果把这些HTML代码全写入JS中根据不同的数据显示的控件也不一样，操作起来会显得比较繁琐而且极不利于代碼的维护，怎么办呢现在就是我要说的，使用模板方法直接把数据往里面套就好了。废话不多说以示例来说明。

接下来就用示例来說明：

例如：从服务器取出一个JSON串把数据显示在一组HTML控件上，现在我先把HTML代码写下来:

大家看到了这段代码如果全部写JS上确实比较烦，洏且大家也发现了为什么在首尾有<script>标签，里面有{}括号括住了一些值为什么这么写呢，别急别急其实这些{}号中的数据，就是我们要填充的数据的地方括号中的名称就是存贮值的变量，好要怎么填呢？

若我们从服务器上取到的JSON如下:

    好了准备工作做好了重点的来了，別看走眼了:

//定义一个数组用来接收格式化合的数据 //好了，最后把数组化成字符串并添加到table中去。 //走完这一步其实就完成了不会吧，這么简单不错，就是这么简单!! 不信就自己动手去试试!

     哟嚯搞定，等等好像表格的列数对不上，是吧那是因为我没有把模板写完整絀来，继续往下看

现在我来解释为什么把模板代码放在<script></script>中间，假如你把模板代码放在某个<div>中并隐藏起来，那么可能你的代码中会用到$('input[type="text"]')查找控件时不好意思，就会把模板中的也统计进去了这个并不是你想要的。所以我用<script>这么做还有一个好处，就是不会被当成HTML来执行顯示出来 但我们也得保证不能当成js来执行，所以加了个type="text/template"没有这个类型的，自己明白就好了

      另外，像o.mid的数值只会填充到{mid}这个里不会填充到别的地方去，而且{mid}可以存在多个一并全部替换成实际数值了。

    接下来的一个问题就是我取到的数据可能并不是我要给用户显示嘚，那么就需要变通一下了

//格式化时间,当然getFormatDate这个函数我也公布出来了格式化时间而已，见最后面 //图片的尺寸大小: 就是把上面的o.width和o.height变量組合一下，如果任何一个不存在则返回"-" //图片大小。存在才显示xxKB

我要回帖

更多关于 文本框html 的文章

 

随机推荐