服务端返回json数据动态创建行添加到页面表格里

最新推荐文章于 2023-11-24 17:34:59 发布

wangjingan100

最新推荐文章于 2023-11-24 17:34:59 发布

阅读量350

点赞数

分类专栏： JS学习

本文链接：https://blog.csdn.net/wangjingan100/article/details/99288494

版权

JS学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

function test2() {
var data = [{COURSENAME: “国学研究”, KMNAME: “语文”, SCORE: 100, CREDITHOUR: “2”},
{COURSENAME: “国学研究”, KMNAME: “语文”, SCORE: 100, CREDITHOUR: “1”},
{COURSENAME: “国学研究”, KMNAME: “语文”, SCORE: 100, CREDITHOUR: “2”},

            {COURSENAME: "国学研究", KMNAME: "数学", SCORE: 100, CREDITHOUR: "2"},
            {COURSENAME: "国学研究", KMNAME: "数学", SCORE: 100, CREDITHOUR: "3"},
            {COURSENAME: "国学研究", KMNAME: "数学", SCORE: 100, CREDITHOUR: "1"},
            {COURSENAME: "国学研究", KMNAME: "数学", SCORE: 100, CREDITHOUR: "1"},

            {COURSENAME: "国学研究", KMNAME: "英语", SCORE: 100, CREDITHOUR: "3"},
            {COURSENAME: "国学研究", KMNAME: "英语", SCORE: 100, CREDITHOUR: "1"},
            {COURSENAME: "国学研究", KMNAME: "英语", SCORE: 100, CREDITHOUR: "2"},
            {COURSENAME: "国学研究", KMNAME: "英语", SCORE: 100, CREDITHOUR: "1"},
            {COURSENAME: "国学研究", KMNAME: "英语", SCORE: 100, CREDITHOUR: "4"}];
            if (data.length > 0 && data[0].KMNAME !=null) {
            var table = $('#ZB02');
            var tds = table.find('td:gt(2)');
            var arr = {}, kmname;
            //按表格顺序初始化
            for (var i in tds) {
                if (tds.eq(i).text().length>0)
                arr[tds.eq(i).text()] = { course: [], credithour: 0 };
            }
            //按顺序填充数据
            var maxrow = 0;
            for (var i in data) {
                kmname = data[i].KMNAME;
                if (!arr[kmname]) {
                    arr[kmname] = { course: [], credithour:0};
                }
                arr[kmname].course.push(data[i].COURSENAME);
                arr[kmname].credithour += parseInt(data[i].CREDITHOUR);
                if (arr[kmname].course.length > maxrow) {
                    maxrow = arr[kmname].course.length;
                }
            }
            console.log(arr); console.log(maxrow);
            var col = 0,course='';
            var obj = $('<div></div>');
            for (var row = 0; row < maxrow; row++) {
                var trObj = $('<tr></tr>');
                trObj.append(tds.clone());
                col = 0;
                for (var km in arr) {
                    if (arr[km].course.length > row) {
                        course = arr[km].course[row];
                    } else {
                        course = '';
                    }
                    trObj.find('td').eq(col).text(course);
                    col++;
                }
                if (row === 0) {
                    trObj.prepend('<td rowspan="' + (maxrow) + '">模块<br />专题</td>');
                }
                obj.append(trObj);
            }
            //显示总学分
            var credithtml = $('<tr></tr>').append(tds.clone());
            col = 0;
            for (var km in arr) {
                credithtml.children().eq(col).text(arr[km].credithour);
                col++;
            }
            table.next().next().next().replaceWith('<tr><td>学分</td>' + credithtml.html() + '</tr>');
            table.next().remove();
            if (maxrow > 1) {
                table.next().remove();
            }
            table.after(obj.html());
            table.find('td').eq(0).attr('rowspan', maxrow + 6);
            table.find('td').eq(1).attr('rowspan', maxrow + 2);
        }

    }
    $(function () {
        test2();
    });

学业水平	学业修习	科目	语文	数学	英语	政治	历史	地理	物理	化学	生物	信息技术	通用技术	艺术	体育与健康	综合实践活动
		模块专题
		模块专题
		学分