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;
}
$newRow = $
+ "<td style='text-align:center'>\n"
+ " <input type='checkbox' name='data1CheckListId' value='" + data
+ " <input type='hidden' name='data1ListId' value='" +
+"</
+ "<
+ "<
+ "<
+ "</
(1). 將動態的 HTML Code
$table1
(2). 設值:
/** 找到$uiRow -- tr 內的第三個td -- td:eq(3), 並把值 -- element3's data設定入*/
$newRow
element3's data 則為透過 Ajax(或其他方式) 傳回的值, 型態為 Map*,並透過each將值取出並組成另外element的code**(註2)
$select1 = '<select name="
/**
$
$select1 = $select1 + '<option value="'+key+'" title="'+item.desc+'" ';
$select1 = $select1 + (
$select1 = $select1 + item.desc + '</option>';
});
$select1 = $select1 + '</select>';
$select1 =
}
}