1. 程式人生 > >jquery動態新增List內容的Table,通過append

jquery動態新增List內容的Table,通過append

  <div id="QuestionList" style="float: left; width: 50%; height: 40%; margin: 0px,0px,0px,0px; "></div>

  function ShowIssueTable(lst) {//lst為List資料集合
        $('#QuestionList').html("");//現將<div>內容清空
        var $trTitle1 = $("<tr style='border:solid black 1px;border-collapse:collapse'></tr>");
        $trTitle1.append("<td style='text-align:center;width:60px;border:solid black 1px;border-collapse:collapse'>機種</td>");
        $trTitle1.append("<td style='text-align:center;width:300px;border:solid black 1px;border-collapse:collapse'> 原因</td>");
        $trTitle1.append("<td style='text-align:center;width:300px;border:solid black 1px;border-collapse:collapse'> 對策</td>");
        $trTitle1.appendTo("#QuestionList'");//將表頭內容新增到QuestionList中
        var reg = new RegExp("\r\n", "g");//g,表示全部替換
        for (var count = 0; count < lst.length; count++) {//迴圈新增行內容
            lst[count].Action = lst[count].Action.replace(reg, "<br/>")//換行替換
            var $trData = $("<tr style='border:solid black 1px;border-collapse:collapse'></tr>");
            $trData.append("<td style='text-align:left;border:solid black 1px;border-collapse:collapse;font-size:12px'>" + lst[count].Model + "</td>");
            $trData.append("<td style='text-align:left;border:solid black 1px;border-collapse:collapse;font-size:12px'>" + lst[count].RootCause + "</td>");
            $trData.append("<td style='text-align:left;border:solid black 1px;border-collapse:collapse;font-size:12px'>" + lst[count].Action + "</td>");
            $trData.appendTo("#QuestionList'");//將行內容新增到QuestionList中
        }
    }