UI 情境 2 : 使用jQuery動態新增HTML Table內一個新列的起手式 :

$newRow = $("<tr>"
+ "<td style='text-align:center'>\n"
+ "  <input type='checkbox' name='data1CheckListId' value='" + data.listId + "'>"
+ "  <input type='hidden' name='data1ListId' value='" + data.listId + "'>"
+"</td>"
+ "<td></td>"
+ "<td></td>"
+ "<td></td>"
+ "</tr>");

(1). 將動態的 HTML Code($newRow), 加入靜態的 HTML Code($table1)：

var $table1 = $('#table1');
$table1.append($newRow);

(2). 設值：

/** 找到$uiRow -- tr 內的第三個td -- td:eq(3), 並把值 -- element3's data設定入*/
$newRow.find("td:eq(3)").html(element3's data);

element3's data 則為透過 Ajax(或其他方式) 傳回的值, 型態為 Map*，並透過each將值取出並組成另外element的code**(註2)。

註 2：範例

var statusMap = <%java's map1%>

/** 產生下拉式選單 */
function genSelect1(selectedStatus){
if(statusMap){
$select1 = '<select  name="statusId" id="statusId">';
/** jQuery's each*/
$.each( statusMap, function( key, item) {
$select1 = $select1 + '<option value="'+key+'" title="'+item.desc+'" ';
$select1 = $select1 + (selectedStatus== item.desc ? 'selected>' : '>' );
$select1 = $select1 + item.desc + '</option>';
});
$select1 = $select1 + '</select>';
}else{
$select1 = selectedStatus;
}
return $select1;

}