动态创建table表格页面出现undefined原因以及修改

在利用ajax请求json数据后动态显示在表格上，然后发现无论从什么位置开始输出，表格第一行总是会出现undefined

undefined下面所有数据都是输出正确的。
源码：

function getinfo(string) {
    $.ajax({
        url: "http://localhost:3004/info",
        type: "GET",
        dataType: "json",
        success: function (data) {
            var i;
            var html;//用一个变量来存储json中的数据
            for (i = 0; i < data.length; i++) { //用for循环遍历数组将数据存入html变量中
                if(isEmpty(data[i].name||isEmpty(data[i].id))||isEmpty(data[i].age)||isEmpty(data[i].gender)||isEmpty(data[i].occupation)) {
                }else {
                    console.log(data[i]);
                    html += `<tr class="trs">
                        <td>${data[i].name}</td>
                        <td>${data[i].id}</td>
                        <td>${data[i].age}</td>
                        <td>${data[i].gender}</td>
                        <td>${data[i].occupation}</td>
                        </tr>`;
                } 
            }
            document.getElementById(string).innerHTML += html;
        },
        error: function () {
            alert("数据申请失败");
        }
    })
}

原因：变量html没有初始化就会出现undefined。undefined和字符串连接会保留undefined这个字符串。

修改：将var html;改为var html="";

补充：经查阅资料，页面出现undefined的原因还可能是：

ajax动态请求数据有部分空数据也会显示undefined，意思是在数据库中一条数据有空字段，会在页面中显示undefined。

解决办法：可以用三元运算符来进行判断，若为空则显示空格，否则显示自己。

lists.type==undefined？’’:lists.type;