zoukankan      html  css  js  c++  java
  • javascript动态操作表格

    如说我们在发送ajax后返回的JSON格式的字符串,那么我们要把这些数据放入HTML应该怎么办呢?
    在现在的页面布局中,table的使用很少了,但是在展现列表等数据的时候还是会使用table,原因只因为table比div更方便,所以用 JS操作table也是经常使用的,好了,还是看代码,
    ajax发送过程就不写了,这里的是ajax的onreadystatechange调用函数
    假设我们这里的data = [{"username":"张三","age":"25"},{"username":"李四","age":"30"}]
    Javascript 代码
    1. function show(){  
    2.     var data = ajax.responseText;//返回数据---JSON格式字符串  
    3.     data = data.replace(/^\s*/, "").replace(/\s*$/, "");//取出返回数据里面多 余的空值  
    4.     data = eval('('+data+')'); //将JSON格式字符串转换为JSON对象  
    5.            var tab = document.getElementById("table_id");// 获取页面的table  
    6.            for(var i=0;i<data.length;i++){  
    7.                     var newLine = tab.insertRow();//添加一行  
    8.                        var newCell1 = newLine.insertCell();  
    9.                     var newCell2 = newLine.insertCell();  
    10.                     newCell1.innerHTML=data[i].username;  
    11.                     newCell2.innerHTML=data[i].age;  
    12.          }  
    13. }  
    function show(){ var data = ajax.responseText;//返回数据---JSON格式字符串 data = data.replace(/^\s*/, "").replace(/\s*$/, "");//取出返回数据里面多余的空值 data = eval('('+data+')'); //将JSON格式字符串转换为JSON对象 var tab = document.getElementById("table_id");//获取页面的table for(var i=0;i<data.length;i++){ var newLine = tab.insertRow();//添加一行 var newCell1 = newLine.insertCell(); var newCell2 = newLine.insertCell(); newCell1.innerHTML=data[i].username; newCell2.innerHTML=data[i].age; } }
    好了现在我们的数据就展现在前端HTML页面了!
  • 相关阅读:
    阿里轻量应用服务器 Tomcat 注意的地方 Unsupported major.minor version 52.0(unable to load class
    微信小程序-进度条循环播放
    微信小程序-动画
    微信小程序-自定义分享
    微信小程序-引导页
    微信小程序-时间轴
    微信小程序-两次点击不同图片交换图片位置
    Kafka消费者——消费者客户端多线程实现
    Kakfa消费者——原理及分析
    Kafka基础——Kafka架构
  • 原文地址:https://www.cnblogs.com/danghuijian/p/4400307.html
Copyright © 2011-2022 走看看