jQuery 分割字符串 table分行显示

教育机构的后台管理 意向客户管理

做这部分功能的时候涉及到添加客户的意向课程 ， 用了一个 table 表来完成添加过程中课程的展示。


下半部分所展示的就是整体效果，如下图。

点开增加课程按钮，弹框选择现有课程，如下图。

在数据库保存的时候是用","分隔开不同的课程，如下图。

下面贴上查询课程并拼接到页面 table tbody 上的代码。

    var url = AppConf.server.sys + '/basicStudent/selectCourse',
            $this = this,
            data = {};
        data.id = rows[0].id;
        data.token = AppConf.getUserToken();
        $.get(url, data, function (data) {
            var msg = "";
            data.map(function (course, index) {
                    // console.log(course);
                    msg += "<tr>";
                    msg += "<td><input type='checkbox' name='chooseCourse'></td>";
                    msg += "<td>" + course.stuPtlCourse + "</td>";     // 课程名称
                    msg += "<td>" + "</td>";
                    msg += "<td>" + "</td>";
                    msg += "</tr>";
            });
            $this.ui.bodyPtl.append(msg);
        });

如此直接拼接上去，结果实际效果不正确，回显的时候，把整个字符串都显示到了一个单元格。
like this…????

于是想了办法，用 split() 分割所获取到的字符串，另外再嵌套一个for循环去分割它们。

       var url = AppConf.server.sys + '/basicStudent/selectCourse',
            $this = this,
            data = {};
        data.id = rows[0].id;
        data.token = AppConf.getUserToken();
        $.get(url, data, function (data) {
            var msg = "";
            data.map(function (course, index) {
                var strArray = course.stuPtlCourse.split(","); // 分割课程字符串
                // console.log(strArray);
                for (var i = 0; i < strArray.length; i++) {    // 循环添加到table
                    msg += "<tr>";
                    msg += "<td><input type='checkbox' name='chooseCourse'></td>";
                    msg += "<td>" + strArray[i] + "</td>";     // 课程名称
                    msg += "<td>" + "</td>";
                    msg += "<td>" + "</td>";
                    msg += "</tr>";
                }
            });
            $this.ui.bodyPtl.append(msg);
        });

最终达成效果，在编辑客户的时候，回显如下。