多级指标打分表单自动创建JavaScript代码解析

  为了解释按多级指标自动创建打分表的设计,以及相关指标考核打分业务,写了Demo代码供开发人员参考,主要涉及到Table动态操作技术及算法实践。

1. HTML DOM Table 对象操作

1.1. 插入一行

  使用HTML DOM insertRow() 方法,insertRow(index) 方法用于在表格中的指定位置插入一个新行。

  若 index 等于表中的行数,则新行将被附加到表的末尾。

1.2. 插入单元格

  使用HTML DOM insertCell() 方法,insertCell() 方法用于在 HTML 表的一行的指定位置插入一个空的<td> 元素。

  

  如果 index 等于行中的单元格数,则新单元格被附加在行的末尾。

  如上表所示,如果存在合并单元格,插入单元格位置计算将是个难点,本例中行合并,insertCell(index)中 index 在合并单元格后首行顺延1,…;而换到合并单元格范围内的下一行后,index从0开始计数。

1.3. 设置HTML DOM TableCell 对象

  本例用到的TableCell 对象属性:

  rowSpan,设置或返回单元格可横跨的行数。

  innerHTML,可设置或返回单元格的开始标签和结束标签之间的 HTML。

1.4. 先插入行,再插入单元格

  使用脚本动态创建Table过程如下(按本例解析):

  

  (1)基于当前已经在HTML中写好的Table

<table id="myTable" border="1">

</table>

  (2)以此Table为根,逐行插入“所有”需要的行数

  所有,是指按行合并单元格,一次性的插入rowspan行数。

  for (var j=0;j<rowspan;j++){
    //rownum是当前行数,‘myTable‘是已经在HTML中写好的table
    var tmpRow=document.getElementById(‘myTable‘).insertRow(rownum);
    //为行定义ID
    tmpRow.id = "rowid" + rownum;
    rownum =  rownum + 1;
  }

  (3)按行插入单元格,并初始化

  tmpcell_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=\"" + rule_obj + "\">";

2. 打分数据规则验证

2.1. 排序后比较数据首位

  使用sort() 方法用于对数组的元素进行排序。

  

  数值排序必须使用一个排序函数[1],如下代码所示(本文DEMO代码略去)。

  

<script type="text/javascript">

function sortNumber(a,b)
{
return a - b
}

var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"

document.write(arr + "<br />")
document.write(arr.sort(sortNumber))

</script>

2.2. 分组排序

  分组规则设置在input自定义属性上,本文定义属性为rule。

    grateObject = document.getElementsByName("grate");
    len = grateObject.length;
    rule[0] = grateObject[0].getAttribute("rule");

3. Demo 代码

  演示效果如下图所示,先点击按钮“测试多级指标展现”,展现指标考核表,填上打分(例如都打5分),再点击按钮“测试读取打分数据及打分规则验证”,提示两次“数值相同”。


<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<script>

//显示所有回写数据
function showAllElem(){
    var ret_json = "";  //定义返回JSON数据字符串

    ret_json ="{\"names\":\"党风廉政建设责任制民主测评票(班子)\",\"rvsn_number\":\"DFLZJS\",\"tableid\":\"DFLZJS_BZCP\",\"level\":\"2\",\"firstitems\":[";
    ret_json = ret_json + "{\"classa\":\"加强作风建设的情况\",\"rowspana\":\"3\",\"seconditems\":[";
    ret_json = ret_json + "{\"content\":\"落实中央“八项规定”,杜绝奢侈浪费、公车私用、公款消费的情况情况\",\"orderby\":\"1\",\"datastyle\":\"0\",\"checked\":\"rule1\"},";
    ret_json = ret_json + "{\"content\":\"关心员工利益,密切联系群众的情况\",\"orderby\":\"2\",\"datastyle\":\"0\",\"checked\":\"rule1\"},";
    ret_json = ret_json + "{\"content\":\"班子团结、相互协作的情况\",\"orderby\":\"3\",\"datastyle\":\"0\",\"checked\":\"rule1\"}";
    ret_json = ret_json + "]},";
    ret_json = ret_json + "{\"classa\":\"廉洁自律的情况\",\"rowspana\":\"4\",\"seconditems\":[";
    ret_json = ret_json + "{\"content\":\"遵守国有企业领导人员廉洁自律若干规定的情况\",\"orderby\":\"1\",\"datastyle\":\"0\",\"checked\":\"rule2\"},";
    ret_json = ret_json + "{\"content\":\"执行廉洁自律,不利用职务便利收受现金、有价证券和支付凭证的情况\",\"orderby\":\"2\",\"datastyle\":\"0\",\"checked\":\"rule2\"},";
    ret_json = ret_json + "{\"content\":\"执行廉洁自律,不利用职务便利为本人及配偶、子女及其他特定关系人谋取利益的情况\",\"orderby\":\"3\",\"datastyle\":\"0\",\"checked\":\"rule2\"},";
    ret_json = ret_json + "{\"content\":\"遵守国家法律法规的情况\",\"orderby\":\"4\",\"datastyle\":\"0\",\"checked\":\"rule2\"}";
    ret_json = ret_json + "]}";
    ret_json = ret_json + "]}";

    //将 JavaScript 对象表示法 (JSON) 字符串转换为对象。
    var json_obj = JSON.parse(ret_json);

    var strtmp = new String("");

    var itemsobject = json_obj.firstitems;
    var classalength = itemsobject.length;
    var rownum =  0;

    for(var i=0;i<classalength;i++){

        var tmp_obj = itemsobject[i].classa;
        var rowspan = itemsobject[i].rowspana;

        for (var j=0;j<rowspan;j++){
            var tmpRow=document.getElementById(‘myTable‘).insertRow(rownum);

            tmpRow.id = "rowid" + rownum;
            rownum =  rownum + 1;
        }
        //插入首个单元格       //alert("rownum:"+rownum+",rowspan:" + rowspan);
        var rownumfirst =  rownum - parseInt(rowspan);
        var tmprow = document.getElementById("rowid" + rownumfirst).insertCell(0);
        tmprow.innerHTML=tmp_obj;
        tmprow.rowSpan = rowspan;

        var row_data = itemsobject[i].seconditems;
        insertRowData(row_data,rownumfirst) ;
    }
}

//取指标行内容数据
function insertRowData(json_data,n){
    var contentrow = json_data.length

    for(var i=0;i<contentrow;i++){
        var tmp_obj = json_data[i].content;
        var rule_obj = json_data[i].checked;
        var rownum = parseInt(n) + i;
        var tmpcell_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(){
    var grateObject = new Array();
    var len = 0 ;
    var grate = new Array();
    var rule = new Array();
    var j=0 ,k=0;

    grate[0] = new Array();
    grateObject = document.getElementsByName("grate");
    len = grateObject.length;
    rule[0] = grateObject[0].getAttribute("rule");
    for (var i=0;i<len;i++){
        if (rule[j] == grateObject[i].getAttribute("rule")){
            grate[j][k] = grateObject[i].value;
            k = k + 1;
        }
        else{
            //开始新一行数组计数
            j = j + 1;
            k = 0;
            grate[j] = new Array();
            rule[j] = grateObject[i].getAttribute("rule");
            grate[j][k] = grateObject[i].value;
            k = k + 1;
        }
    }
    //对数组排序,然后取头尾比较
    len = rule.length;
    for (var i=0;i<len;i++){
        var tmp_grate = grate[i].sort();
        var tmp_len = tmp_grate.length ;
        if (tmp_grate[0]==tmp_grate[tmp_len-1]){
            alert(rule[i] + ":数值相同");
        }
    }
}

</script>
</head>
<body>
<h1>多级指标展现及打分测试 JavaScript</h1>
<div id="tdl"><div>
<p id="demo" >这是表单数据解析示例.</p>
<div>
<button id="test" type="button" onclick="showAllElem()">测试多级指标展现</button>
<button id="test1" type="button" onclick="getAllElem()">测试读取打分数据及打分规则验证</button><br><br>
</div>
<table id="myTable" border="1">

</table>
</body>
</html>

参考:

1.《JavaScript sort() 方法》 W3School

2.《可配置多级指标投票打分应用设计(1)》 肖永威 2016.4

3.《使用JavaScript实现动态创建含合并单元格(行)的表单 》 肖永威 2016.4

4.《可配置多级指标投票打分应用设计(3) 》 肖永威 2016.5

时间: 2024-11-05 21:56:43

多级指标打分表单自动创建JavaScript代码解析的相关文章

Thinkphp表单自动验证

之前项目经常用到,没做总结. 自动验证是Thinphp模型层提供的一种数据验证方法,可以在使用create创建数据对象的时候自动进行数据验证. 原理: create()方法收集表单($_POST)信息并返回,同时触发表单自动验证,过滤非法字段, 在控制器中使用create()方法,(返回值为true/false),会自动触发模型类中的$_validate属性(为父类Model中的方法,在子类Model中重写),在$_validate中自定义验证规则(验证规则下面会详细说明),当create()方

按下enter键后表单自动提交问题

在HTML的form表单里,按下enter键之后,默认情况下表单会自动提交. 在公司一个项目里,按下enter键自动提交表单的查询结果与按下搜索框的搜索结果页面显示不一样,按下搜索按钮之后是通过Ajax请求返回结果:而按下enter键是直接post请求然后跳转返回一个页面,失去了页面样式及导航等. 一开以为是写了js代码导致按下enter键之后会触发表单提交,后来把js代码全部移除也是一样地按下enter键会触发表单提交.到网上搜索发现是因为默认情况下在form表单内按下enter键会触发表单自

chrome表单自动填充导致input文本框背景变成偏黄色问题解决

chrome表单自动填充导致input文本框背景变成偏黄色问题解决 作者:佚名 字体:[增加 减小] 来源:互联网 时间:08-21 18:43:32我要评论 chrome表单自动填充后,input文本框的背景会变成偏黄色的,想必大家都会碰到这种情况吧,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性造成的,解决方法如下,感兴趣的朋友可以了解下 chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认

chrome表单自动填充去掉input黄色背景解决方案

chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式: input:-webkit-autofill { background-color: #FAFFBD; background-image: none; color: #000; } 在有些情况下,这个黄色的背景会影响到我们界面的效果,尤其是在我们给input文本框使用图片背景的时候,原来的圆角和边框

表单自动提交问题整理

表单自动提交问题 问题描述 二是利用了浏览器的默认行为(至少发现ie是这样的).浏览器在解析网页的时候,有许多默认的行为,例如: * 如果一个页面上有表单和一个提交按钮,那么打开页面时,焦点会自动落在这个提交按钮上面. * 同样如果一个表单中只有一个单行文本输入域(text),那么在这个输入域中按Enter键时,浏览器会自动提交该表单. 我们对于第一种情况一般都知道而且很容易理解,但是对于第二种浏览器的默认行为,可能知道这一点的人就比较少了,下面我具体看一下浏览器(至少ie如此)在表单提交上的默

thinkPHP 表单自动验证功能

昨天晚上我们老大叫我弄表单自动验证功能,愁了半天借鉴了好多官网的知识,才出来,诶,总之分享一下我自己的成果吧! thinkphp 在Model基类为我们定义了自动验证的函数和正则表达式,我们只需要在对应的数据库表的模型类下建立$_validate属性就可以了. 1.我们找到Model基类,可以看到 protected $_validate       = array();  // 自动验证定,它是数组类型的,下面在对应数据模型文件定义它: 2. public function CheckVeri

Extjs的form表单自动装载数据(通过Ext.data.Model的代理加载数据)

在做项目的时候遇到一个问题,以前双击grid页面一行数据的时候,会吧双击这一行的数据自动加载到双击的页面(Ext的弹出框),可以通过this.down(''form).getForm().loadRecord(record)来自动加载,可是现在有一个需求就是双击grid一行弹出一个新的浏览器页面(不是ext的弹出框,通过window.open()实现),只能把双击的id传到页面,再重新查数据手动赋值,如果一个页面字段很多,一个一个赋值是很辛苦的,所以就想能不能自动装载数据 通过长时间研究发现,t

#-webkit-autofill##google#启用表单自动填充时,如果覆盖黄色背景

google和opera浏览器的表单自动填充后,输入框均会变成黄色背景,黑色字体.如下图. 这样的话会与网页的整体设计风格不一致,怎样自定义样式,来覆盖黄色背景. 首先来看看是什么导致的,右键查看元素样式: input:-webkit-autofill,textarea:-webkit-autofill, select:-webkit-autofill{ background-color: rgb(250, 255, 189); background-image: none; color: rg

chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式。

参考blog来自 http://segmentfault.com/q/1010000000671971 chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式. 一.发现该问题的原因-是在写账号登录页面时,input表单添加了背景图片,当自动填充,搓搓的一坨淡黄色背景出来. 这个原因是我草率的直接设置在input元素里面,结果问题就来了.所以如果把这个图标放在input表单外面,就不会出现这个问题. 二.表单自动填充会添加浏览器默认样式怎么处理和避免 第二张图,就是表单自动填充后,