Sorry, it's ugly. I haven't published any articles for a long time.
Jquery Extension
A simple Html Table is automatically generated based on JSON data.
I wrote this example because of project requirements. By the way, I will post it to my blog!
JQuery. fn. MakeTable = function (objColumn, objData, objClassName, RowClick ){
// Style
$ (This). attr ("class", objClassName );
Var sHtml = "";
SHtml + = "<thead> ";
Var sTrHtml = "<tr> ";
$. Each (objColumn, function (I ){
STrHtml + = "<th ";
STrHtml + = "style = \" width: "+ objColumn [I]. Width. toString () +" px \"";
STrHtml + = "> ";
STrHtml + = objColumn [I]. ColumnName;
STrHtml + = "</th> ";
});
STrHtml + = "</tr> ";
SHtml + = sTrHtml + "</thead> ";
SHtml + = "<tbody> ";
$. Each (objData, function (I ){
STrHtml = "<tr ";
If (RowClick! = Null & RowClick! = Undefined ){
// Alert (RowClick );
STrHtml + = "onclick = \" CheckRow (this, "+ RowClick + ")\"";
}
STrHtml + = "> ";
Var objTr = objData [I];
For (x in objTr ){
STrHtml + = "<td style = \"";
Var objLinqData = jLinq. from (objColumn). equals ("DataId", x). take () [0];
STrHtml + = "text-align:" + objLinqData. DataAlign + ";";
STrHtml + = "\"";
If (objLinqData. OnClick! = Null ){
STrHtml + = "onclick = \" "+ objLinqData. OnClick + "\"";
}
STrHtml + = "> ";
If (objLinqData. Format! = Null ){
STrHtml + = objLinqData. Format (objTr [x]);
}
Else {
STrHtml + = objTr [x];
}
STrHtml + = "</td> ";
// Alert (x );
}
// STrHtml + = objData [I].
STrHtml + = "</tr> ";
SHtml + = sTrHtml;
});
SHtml + = "</tbody> ";
// Alert (sHtml );
// $ ("#" + SId + "> tbody: last"). append (sTrHtml );
Var sId = this [0]. id;
$ ("#" + SId). append (sHtml );
};
Download