js简单封装：简单把数据直接输出到表格之中

为了更方便实现字符串的格式化，这里仿照其他语言写了format这个函数,如下：

//格式化字符串，这个方法网上有很多例子 不懂自行百度吧
String.prototype.format = function (param) {
    var reg = /{([^{}]+)}/gm;
    return this.replace(reg, function (match, name) {
        return param[name];
    });
};

 

接下来到重点，上代码：

/**
 * 清除并加载数组到表格中
 * @param table_id 表格ID 需要带# 如"#myTable"
 * @param tr_template 带参数的行模板 
 * @param arr_data 模板对应的数据
 * @param arr_params_name 模板对应的参数 需要和arr_data的长度一致
 */
Utils.loadListToTable = function (table_id, tr_template, arr_data, arr_params_name) {
    var table = $(table_id);
    var paramsLen = arr_params_name.length;//获取参数的长度
    //移除已经存在的行
    $(table_id+" tr:not(:first)").remove();

    if(arr_data.length<1){
//因为本人采用Ajax加载数据，所以为了避免没有效果,这里做了个判断，
//如果传入的数据长度小于1的话，直接在表格提示没有数据
        var non='<tr rowspan="3"class="text-center"><td colspan="'+paramsLen+'" style="color: #9e9e9e57;">什么都没有</td></tr>'
        $(table_id+" tbody:last").append(non);
    }

    for (var j = 0; j < arr_data.length; j++) {

        var formatParams = {};
        //构造参数
        for (var i = 0; i < paramsLen; i++) {
            formatParams[arr_params_name[i]] = arr_data[j][arr_params_name[i]];
        }

        var row=tr_template.format(formatParams);
        $(table_id+" tbody:last").append(row);
    }
};

 

使用例子：

页面代码（只列出关键代码）：

 <div>

 <table id="myTable">

 <thead>
    <tr>
         <th>姓名</th>
         <th>密码</th>
    </tr>
 </thead>
 <tbody>

</tbody>

</table>

</div>

 

初始界面：

数据准备：

//生成一组数据
var testData=[{name:'wpr',pwd:'123'},{name:'wrp',pwd:'456'},{name:'rwp',pwd:'789'},{name:'wrp',pwd:'000'},{name:'prw',pwd:'666'}];
//行的模板 这里的目标表格列数为两列
var row_templ = '<tr><td>{name}</td><td>{pwd}</td></tr>';

//构造参数列表，方便格式化
var paramsName=['name','pwd'];

//加载数据至表格
 Utils.loadListToTable('#myTable',row_templ ,testData,paramsName);

 

加载结果:

 

所有js代码：

$(function(){

function Utils(){}

Utils.loadListToTable = function (table_id, tr_template, arr_data, arr_params_name) {
    var table = $(table_id);
    var paramsLen = arr_params_name.length;//获取参数的长度
    //移除已经存在的行
    $(table_id+" tr:not(:first)").remove();

    if(arr_data.length<1){
        var non='<tr rowspan="3"class="text-center"><td colspan="'+paramsLen+'" style="color: #9e9e9e57;">什么都没有</td></tr>'
        $(table_id+" tbody:last").append(non);
    }

    for (var j = 0; j < arr_data.length; j++) {

        var formatParams = {};
        //构造参数
        for (var i = 0; i < paramsLen; i++) {
            formatParams[arr_params_name[i]] = arr_data[j][arr_params_name[i]];
        }

        var row=tr_template.format(formatParams);
        $(table_id+" tbody:last").append(row);
    }


};

//格式化字符串，这个方法网上有很多例子 不懂自行百度吧
String.prototype.format = function (param) {
    var reg = /{([^{}]+)}/gm;
    return this.replace(reg, function (match, name) {
        return param[name];
    });
};


//生成一组数据
var testData=[{name:'wpr',pwd:'123'},{name:'wrp',pwd:'456'},{name:'rwp',pwd:'789'},{name:'wrp',pwd:'000'},{name:'prw',pwd:'666'}];
//行的模板 这里的目标表格列数为两列
var row_templ = '<tr><td>{name}</td><td>{pwd}</td></tr>';

//构造参数列表，方便格式化
var paramsName=['name','pwd'];
//>------需要注意 行模板{}中的值和paramsName里面的名需要对应，其实可以进一步封装------<

//加载数据至表格
 Utils.loadListToTable('#myTable',row_templ ,testData,paramsName);

})