Home > Developer > JavaScript
In order to explain the design of automatic scoring table based on multi-level indicators, as well as related indicators assessment scoring business, wrote the demo code for developers to reference, mainly related to table dynamic operation technology and algorithm practice.
1. HTML DOM Table Object Operation 1.1. Insert a rowUsing the HTML DOM insertRow () method, the InsertRow (index) method is used to insert a new row at the specified position in the table.
If index equals the number of rows in the table, the new row is appended to the end of the table.
1.2. Inserting cellsUsing the HTML DOM InsertCell () method, the InsertCell () method is used to insert an empty element at the specified location on one line of the HTML table <td> .
If index equals the number of cells in the row, the new cell is appended to the end of the row.
As shown in the table above, if a merged cell exists, inserting a cell position calculation will be a pain point, in this case the row is merged, the index in InsertCell (index) in the first row after the merged cell is postponed by 1 ... When you change to the next row in the range of merged cells, index counts from 0.
1.3. Set the HTML DOM TableCell objectThe TableCell object properties used in this example are:
RowSpan, Sets or returns the number of rows that a cell can span.
InnerHTML, you can set or return the HTML between the opening and closing tags of a cell.
Using the script to dynamically create the table procedure is as follows (as this example resolves):
(1) Based on a table that is currently written in HTML
<table id="myTable" border="1"></table>
(2) With this table as the root, insert "All" line by line the number of rows required
All, refers to the merged cells by row, one-time insert rowspan number of rows.
for (var j=0;j<rowspan;j++){ //rownum是当前行数，‘myTable‘是已经在HTML中写好的table var tmpRow=document.getElementById(‘myTable‘).insertRow(rownum); //为行定义ID "rowid" + rownum; rownum = 1; }
(3) Insert cells by row, and initialize
2. Scoring data rule validation 2.1. Compare data first after sortingtmpcell_1 = document.getElementById("rowid" + rownum).insertCell(1); tmpcell_2 = document.getElementById("rowid" + rownum).insertCell(2); //通过innerHTML初始化输入框，用于输入分数 tmpcell_2.innerHTML="<input name=\"grate\" type=\"text\" id=\"grate\" maxlength=\"3\" rule=\"""\">";
Use the sort () method to sort the elements of the array.
The numeric sort must use a sort function [1], as shown in the following code (omitted from the demo code in this article).
<script type="Text/javascript"> function sortnumber(A, B){returnA-B}vararr =New Array(6) arr[0] ="Ten"arr[1] ="5"arr[2] ="Max"arr[3] ="very"arr[4] ="+"arr[5] ="1"document.write (arr +"<br/>") document.write (Arr.sort (sortnumber)) </script>The grouping rule is set on the input custom attribute, which defines the attribute as rule.
3. Demo CodegrateObject = document.getElementsByName("grate"); len = grateObject.length; rule[0] = grateObject[0].getAttribute("rule");
Demo effect as shown, first click on the button "test multi-level indicator display", show the indicator evaluation table, fill in the score (for example, all 5 points), and then click the button "test reading scoring data and scoring rules verification", two times "the same value."
<! DOCTYPE html><meta http-equiv="Content-type" Content="text/html; Charset=utf-8 "><head><script>//Show all write-back data function showallelem(){ varRet_json ="";//define return JSON data stringRet_json ="{\" names\ ": \" party Conduct and clean Government Accountability Democratic Assessment ticket (team) \ ", \" Rvsn_number\ ": \" dflzjs\ ", \" tableid\ ": \" Dflzjs_bzcp\ ", \" level\ ": \" 2\ ", \ "Firstitems\": ["; Ret_json = Ret_json +"{\" classa\ ": \" Strengthen the construction of style of the situation \ ", \" rowspana\ ": \" 3\ ", \" seconditems\ ": ["; Ret_json = Ret_json +"{\" content\ ": \" To implement the central "eight provisions", to eliminate extravagance and waste, bus private, public funds consumption situation, \ "orderby\": \ "1\", \ "datastyle\": \ "0\", \ "checked\": \ " Rule1\ "},"; Ret_json = Ret_json +"{\" content\ ": \" Concerned about the interests of employees, close to the masses of the situation \ ", \" orderby\ ": \" 2\ ", \" datastyle\ ": \" 0\ ", \" checked\ ": \" rule1\ "},"; Ret_json = Ret_json +"{\" content\ ": \" Team unity, mutual cooperation situation \ ", \" orderby\ ": \" 3\ ", \" datastyle\ ": \" 0\ ", \" checked\ ": \" rule1\ "}"; Ret_json = Ret_json +"]},"; Ret_json = Ret_json +"{\" classa\ ": \" The situation of clean and self-discipline \ ", \" rowspana\ ": \" 4\ ", \" seconditems\ ": ["; Ret_json = Ret_json +"{\" content\ ": \" Abide by the state-owned enterprise leaders of the rules of probity and self-discipline of the situation \ ", \" orderby\ ": \" 1\ ", \" datastyle\ ": \" 0\ ", \" checked\ ": \" Rule2\ "}," ; Ret_json = Ret_json +"{\" content\ ": \" Perform clean and self-discipline, do not take advantage of the position to facilitate the receipt of cash, securities and payment of vouchers ", \" orderby\ ": \" 2\ ", \" datastyle\ ": \" 0\ ", \" checked\ ": \" Rule2\ "},"; Ret_json = Ret_json +"{\" content\ ": \" Perform clean and self-discipline, do not use the position to facilitate for oneself and spouse, children and other specific relations of the situation of the interests of the person \ ", \" orderby\ ": \" 3\ ", \" datastyle\ ": \" 0\ ", \" checked\ " : \ "Rule2\"}, "; Ret_json = Ret_json +"{\" content\: \ "Compliance with national laws and regulations", \ "orderby\": \ "4\", \ "datastyle\": \ "0\", \ "checked\": \ "Rule2\"} "; Ret_json = Ret_json +"]}"; Ret_json = Ret_json +"]}";//Converts a JavaScript object notation (JSON) string to an object. varJson_obj =JSON. Parse (Ret_json);varStrtmp =New String("");varItemsobject = Json_obj.firstitems;varClassalength = Itemsobject.length;varRowNum =0; for(varI=0; i<classalength;i++) {varTmp_obj = Itemsobject[i].classa;varrowspan = Itemsobject[i].rowspana; for(varj=0; j<rowspan;j++) {varTmprow=document.getelementbyid (' myTable '). InsertRow (rownum); Tmprow.id ="rowID"+ rownum; RowNum = rownum +1; }//Insert first cell//alert ("rownum:" +rownum+ ", rowspan:" + rowspan); varRownumfirst = rownum-parseint(rowspan);varTmprow = document.getElementById ("rowID"+ Rownumfirst). InsertCell (0); Tmprow.innerhtml=tmp_obj; Tmprow.rowspan = RowSpan;varRow_data = Itemsobject[i].seconditems; Insertrowdata (Row_data,rownumfirst); }}//Fetch indicator row content data function insertrowdata(json_data,n){ varContentrow = Json_data.length for(varI=0; i<contentrow;i++) {varTmp_obj = json_data[i].content;varRule_obj = json_data[i].checked;varRowNum =parseint(n) + i;vartmpcell_1,tmpcell_2;if(i==0) {Tmpcell_1 = document.getElementById ("rowID"+ rownum). InsertCell (1); Tmpcell_2 = document.getElementById ("rowID"+ rownum). InsertCell (2); }Else{Tmpcell_1 = document.getElementById ("rowID"+ rownum). InsertCell (0); Tmpcell_2 = document.getElementById ("rowID"+ rownum). InsertCell (1); } tmpcell_1.innerhtml=tmp_obj; Tmpcell_2.innerhtml="<input name=\" grate\ "type=\" text\ "id=\" grate\ "maxlength=\" 3\ "rule=\" "+ Rule_obj +"\" > "; }} function getallelem(){ varGrateobject =New Array();varLen =0;varGrate =New Array();varRule =New Array();varj=0, k=0; grate[0] =New Array(); Grateobject = Document.getelementsbyname ("Grate"); len = grateobject.length; rule[0] = grateobject[0].getattribute ("rule"); for(varI=0; i<len;i++) {if(Rule[j] = = Grateobject[i].getattribute ("rule") {Grate[j][k] = Grateobject[i].value; K = k +1; }Else{//Start new line array Countj = j +1; K =0; GRATE[J] =New Array(); RULE[J] = Grateobject[i].getattribute ("rule"); Grate[j][k] = Grateobject[i].value; K = k +1; } }//Sort an array, and then take the Kinsoku comparisonlen = rule.length; for(varI=0; i<len;i++) {varTmp_grate = Grate[i].sort ();varTmp_len = Tmp_grate.length;if(tmp_grate[0]==tmp_grate[tmp_len-1]) {alert (Rule[i] +": Same Value"); } }}</script></head><body><H1>Multi-level indicator display and scoring test JavaScript</H1><div id="TDL"><div><p id="Demo" >This is an example of form data parsing.</P><div> <button id="Test" type="button" onclick ="Showallelem ()">Test multi-level indicator display</button> <button id="test1" type="button" onclick=" Getallelem () ">Test reading scoring data and scoring rule validation</button><br><br></div> <table id="myTable" border="1"></table></body></html>Reference:
1. The JavaScript sort () method W3school
2. "Configurable multi-level indicator voting score application design (1)" Sho Yongwei 2016.4
3. Using JavaScript for dynamic creation of forms with merged cells (rows) Sho Yongwei 2016.4
4. "Configurable multi-level indicator voting score application design (3)" Sho Yongwei 2016.5
Multi-level indicator scoring form automatically creates JavaScript code parsing
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
