Java programming to write a JavaScript super practical table plug-in

Effects
Documentation

first step
Step 2
Step 3

Source code

Effects

insert image description here

Documentation

first step

Get the icon Form object from tableFactory.

insert image description here

or:

insert image description here

Step 2

Load parameters and pass in json object

insert image description here

Table effect:

insert image description here

json parameter details:

insert image description here

Examples:

insert image description here

corresponds to:

insert image description here

Step 3

Load the table into the div with the corresponding ID in the page.

like:

insert image description here

The width of the TD can be dynamically adjusted according to the number of columns

insert image description here

Put it into a separate file and call it directly.

insert image description here

Source code

//Table factory var tableFactory = function(type){
	if (this instanceof tableFactory) {
		return new this[type]();
	}else{
		return new tableFactory(type); //Prevent the situation where new is not written }
}
tableFactory.prototype = {	
	chartForm : function(){
		var html = ''; //Private properties this.loadParams = function(opts){
			var jsonArr = []; //JSON array var icount = 0; //Used to control row color var rowHeaderArr = []; //Format array of the first column of each row if (opts.jsonArr) {
				jsonArr = opts.jsonArr;
			}
			if (opts.rowHeaderArr) {
				rowHeaderArr = opts.rowHeaderArr;
			}
			var colNum = jsonArr.length; //Record total number of columns var rowNum = rowHeaderArr.length - 1; //Total number of rows (excluding the first row)			
			html = "<TABLE id='table' style=\"border-collapse:collapse;border-spacing:0;border:1px solid #ccc;font-size:12px;text-align:center;\" >"+
								"<TBODY><TR> "+
									"<TD >&nbsp;</TD>"; //The empty TD in the upper left corner
						
			//Spell the first line for(var i = 0;i < colNum;i++){
				var c1 = jsonArr[i].c1;
				html += '<TD style="border:1px solid #ccc;height:14px;background-color:#e2fdfe;font-size:14px;font-weight:bold;padding:3px;" >' + c1 + '</TD>';
			}
			html += '</TR><TR>';
			for(var i = 0;i < rowNum + 1;i++){
				//Spelling row header var colorBox = rowHeaderArr[i].split(',')[0];
				var hearderText = rowHeaderArr[i].split(',')[1];
				html += "<TD class='colorBox' style='padding:3px;height:14px;border:1px solid #ccc;width:66px;text-align:center;'><div style='border-radius:2px 2px 2px 2px;display:inline-block;width:12px;height:12px;background-color:"+colorBox+";float:left;'></div>"+hearderText+"</TD>";
				//Spell all columns to the right of this row for(var j = 0;j < colNum;j++){
					//alert(i);
					var colValue = jsonArr[j]['c'+(i+2)];
					var tdWidth;					
					if(colNum <= tableFactory.TD_WIDTHS.length)
						tdWidth = tableFactory.TD_WIDTHS[colNum-1];
					else 
						tdWidth = tableFactory.TD_WIDTHS[tableFactory.TD_WIDTHS.length - 1];
					console.info(tdWidth);
					if(i%2 == 0){
						html += '<TD style = "height:14px;border:1px solid #ccc;width:'+ tdWidth +'px;text-align:center;background-color:#e2fdfe;">'+colValue+'</TD>'; 
					}else{
						html += '<TD style = "height:14px;border:1px solid #ccc;width:'+ tdWidth +'px;text-align:center;background-color:#fff;">'+colValue+'</TD>'; 
					}					 
				}
				
				//line break html += '</tr><tr>';				
			}
			html += '</TR><TR>';
			html += '</TR>';
			html += '</TBODY></TABLE>';
		} ;
		this.loadData = function(houseId,callback){
			document.getElementById(houseId).innerHTML = html; //Display table
			if(callback) callback();
		}
	}
}
	tableFactory.TD_WIDTHS = [220,190,150,120,90,60,10];

Demo:

<script src='common.js'></script>
<div id='TB' class='TB'></div>
<div id='TB1' class='TB'></div>
<div id='TB2' class='TB'></div>
<div id='TB3' class='TB'></div>
<div id='TB4' class='TB'></div>
<style>
    .TB {
		padding:6px;
	}
</style>
<script>
	var chartForm = tableFactory('chartForm');
	chartForm.loadParams({
						jsonArr: [
										{c1:'Beijing',c2:2,c3:3,c4:3,c5:1,c6:6},
										{c1:'Shanghai',c2:2,c3:2,c4:3,c5:1,c6:6},
										{c1:'Henan',c2:2,c3:4,c4:3,c5:1,c6:6},
										{c1:'Hebei',c2:2,c3:6,c4:3,c5:1,c6:6},
										{c1:'Northeast',c2:2,c3:6,c4:3,c5:1,c6:6},
										{c1:'Sichuan',c2:2,c3:6,c4:3,c5:1,c6:6},
										{c1:'重庆',c2:2,c3:6,c4:3,c5:1,c6:6}
									],
						rowHeaderArr: [
											'#000CCC,Total number of tasks', //row name '#990033,Project establishment stage',
											'#66FF00, Inspection phase',
											'#663399, trial stage',
											'#33CCFF, reporting stage'
									  ]
					});

	chartForm.loadData('TB');
	chartForm.loadParams({
						jsonArr : [
										{c1:'Beijing',c2:2,c3:3,c4:3,c5:1,c6:6},
										{c1:'Shanghai',c2:2,c3:2,c4:3,c5:1,c6:6},
										{c1:'Henan',c2:2,c3:4,c4:3,c5:1,c6:6},
										{c1:'Hebei',c2:2,c3:6,c4:3,c5:1,c6:6},
										{c1:'Northeast',c2:2,c3:6,c4:3,c5:1,c6:6}, {c1:'Sichuan',c2:2,c3:6,c4:3,c5:1,c6:6},
									],
						rowHeaderArr : [
											'#000CCC,Total number of tasks', //row name '#990033,Project establishment stage',
											'#66FF00, Inspection phase',
											'#663399, trial stage',
											'#33CCFF, reporting stage'
									  ]
					});
	chartForm.loadData('TB1');
	chartForm.loadParams({
						jsonArr: [
										{c1:'Beijing',c2:2,c3:3,c4:3,c5:1,c6:6},
										{c1:'Shanghai',c2:2,c3:2,c4:3,c5:1,c6:6},
										{c1:'Henan',c2:2,c3:4,c4:3,c5:1,c6:6},
										{c1:'Hebei',c2:2,c3:6,c4:3,c5:1,c6:6},
										{c1:'Northeast',c2:2,c3:6,c4:3,c5:1,c6:6},
									],
						rowHeaderArr: [
											'#000CCC,Total number of tasks', //row name '#990033,Project establishment stage',
											'#66FF00, Inspection phase',
											'#663399, trial stage',
											'#33CCFF, reporting stage'
									  ]
					});
	chartForm.loadData('TB2');
</script>

The above is the details of writing a super practical JavaScript table plug-in in Java programming. For more information about Java programming JavaScript table plug-in, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:

Have your own javascript form validation plugin
JS component series: Bootstrap table component artifact [final chapter]
Share a table sorting js plug-in written by myself (efficient and concise)
On the left is the JS table control for the table header (self-written, not available online)

<<: Distributed monitoring system Zabbix uses SNMP and JMX channels to collect data

>>: HTML Tutorial: Collection of commonly used HTML tags (4)