呼叫範例 HtmlTableToJson("targetTable")
回傳結果範例
[{"LABEL2":"C4","LABEL3":"T1","PARAMETER_TYPE":"1"
,"VALUE1":"1000.00","SUBTOTAL":"","REMARK":"OK","ATTACHMENT":""},
{"LABEL2":"C4","LABEL3":"T1","PARAMETER_TYPE":"1"
,"VALUE1":"2000.00","SUBTOTAL":"","REMARK":"OK","ATTACHMENT":""}]
Javascript Function 實作如下（考量table有merge cell的議題的寫法），
=====================================================================
function HtmlTableToJson(tableid){
var jsondata = [];
var heads = [];
$("#"+tableid+' thead th').each(function(index,item){
heads.push($(item).attr("name"));
});
var tmpRowdata = {}; //考量table有merge cell的議題的寫法，所以需要這個變數
$("#"+tableid+' tbody tr').each(function(index, item){
var rowdata = {};
$(item).find('td').each(function(index,item2){
for (let i = 0; i < heads.length; i++) {
if (item2.innerHTML.indexOf(heads[i]) >= 0) {
if ($(item2).find('[jsonval]').length > 0) {
tmpVALUE1 = $(item2).find('[jsonval]').val(); //input欄位的取值方式
} else {
tmpVALUE1 = item2.innerText; //其餘欄位取值方式
}
if ($(item2).find('[number]').length > 0) {
tmpVALUE1 = tmpVALUE1.replace(/,/g, ""); //遇到數值欄位自動將千分號去掉，例如1,000 -> 1000
}
tmpRowdata[heads[i]] = tmpVALUE1; //將資料塞入object（若遇到merge cell，會自動取得同群組的merge cell值）
rowdata = JSON.parse(JSON.stringify(tmpRowdata)); //以deep copy的方式取得資料
}
}
});
if (Object.keys(rowdata).length > 0) {
jsondata.push(rowdata); //將資料集合至同一個array
}
});
return jsondata;
};
-------------------------------------------------------------------------------------------------------------------------
Table格式如下
=====================================================================
<table width="100%" id="targetTable" style="border-collapse: separate;">
<thead>
<tr style="background-color:white;top:150px;position:sticky;border-bottom: 1px solid;">
<th name="LABEL2" style="text-align: center;border: 1px solid">Stage</th>
<th name="LABEL3" style="text-align: center;border: 1px solid">子項</th>
<th name="PARAMETER_TYPE" style="text-align: center;border: 1px solid">參數類別</th>
<th name="VALUE1" style="text-align: center;border: 1px solid">單價</th>
<th name="SUBTOTAL" style="text-align: center;border: 1px solid">Sub-Total</th>
<th name="REMARK" style="text-align: center;border: 1px solid">Remark</th>
<th name="ATTACHMENT" style="text-align: center;border: 1px solid">附件</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
-------------------------------------------------------------------------------------------------------------------------
Table的部分列資料由以下生成
=====================================================================
function drawTable(jsonObj) {
var table = document.getElementById("targetTable");
for (var i = 0; i < jsonObj.length; i++) {
var tmpObj = jsonObj[i];
var row = table.insertRow(-1);
var cell = row.insertCell();
tmpStr = (tmpObj.LABEL2 == null ? '' : tmpObj.LABEL2);
cell.style.borderBottom = "1px solid";
tmpStr = '<div name="LABEL2">' + tmpStr + '</div>';
cell.innerHTML = tmpStr;
cell = row.insertCell();
cell.style.borderBottom = "1px solid";
tmpStr = (tmpObj.LABEL3 == null ? '' : tmpObj.LABEL3);
cell.innerHTML = '<div style="text-align:center;" name="LABEL3">' + tmpStr + '</div>';
cell = row.insertCell();
cell.style.borderBottom = "1px solid";
cell.innerHTML = '<div style="text-align:center;" name="PARAMETER_TYPE">' + (tmpObj.PARAMETER_TYPE == null ? '' : tmpObj.PARAMETER_TYPE) + '</div>';
cell = row.insertCell();
cell.style.borderBottom = "1px solid";
cell.innerHTML = '<input name="VALUE1" number="" jsonval="" type="text" style="text-align:right;width:100%;" value="' + toFormatNum(tmpObj.VALUE1 == null ? '' : tmpObj.VALUE1) + '">';
cell = row.insertCell(); //Sub - Total
cell.style.borderBottom = "1px solid";
cell.innerHTML = '<div name="SUBTOTAL" style="text-align:right;">' + toFormatNum(tmpObj.SUBTOTAL == null ? '' : tmpObj.VALUE1) + '</div>';
cell = row.insertCell(); //Remark
cell.style.borderBottom = "1px solid";
cell.innerHTML = '<input name="REMARK" jsonval="" type="text" style="text-align:right;width:100%" value="' + (tmpObj.REMARK == null ? '' : tmpObj.REMARK) + '">';
cell = row.insertCell(); //附件
cell.style.borderBottom = "1px solid";
cell.innerHTML = '<input name="ATTACHMENT" type="button" value="上傳附件">';
}
}
留言列表
