Jquery不规则表格，数据处理，动态生成

<!DOCTYPE html><html><head><title></title><style type="">.check-table,.check-table tr th,.check-table tr td {border: 1px solid #d8d8d8;padding...

玐也很可爱呀

464人浏览 · 2020-04-29 18:29:27

玐也很可爱呀 · 2020-04-29 18:29:27 发布

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="">
    .check-table,
.check-table tr th,
.check-table tr td {
  border: 1px solid #d8d8d8;
  padding: 14px 0;
}
.check-table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  padding: 2px;
  font-size: 14px;
}
  .table-title {
    background-color: #f7f7f7;
    color: #333;
    font-weight: bold;
  }
  </style>
</head>
    <table class="check-table">
        <thead>
            <tr class="table-title">  <!-- tr：table row：表格的行 -->
                <th>考核类别</th>
                <th>考核内容</th>
                <th>打分方式</th>
                <th>达标量</th>
                <th>考核分</th>
                <th>考核规则</th>
            </tr>
        </thead>
        <tbody id="J_TbData">
        </tbody>

    </table>
<body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var value = {
  "ruleTableEvaluationVos": [{
    "name": "扣分事项",
    "ruleContentVos": [{
      "content": "重点场所巡查(工作日)",
      "isDailyAssessment": 1,
      "perNoStandardVal": 0.5,
      "ruleContentDetail": "未达标 扣0.5分",
      "score": 10.0,
      "typeGroup": "系统统计"
    }, {
      "content": "重点人员巡查(工作日)",
      "isDailyAssessment": 1,
      "perNoStandardVal": 0.5,
      "ruleContentDetail": "未达标 扣0.5分",
      "score": 10.0,
      "typeGroup": "系统统计"
    }, {
      "content": "事件新增数(有图)",
      "perNoStandardVal": 2.0,
      "ruleContentDetail": "",
      "score": 10.0,
      "typeGroup": "系统统计"
    }, {
      "content": "基础信息采集",
      "perNoStandardVal": 0.5,
      "ruleContentDetail": "抽查信息未采集或采集采集错误,每次扣0.5分",
      "score": 10.0,
      "typeGroup": "手动打分"
    }, {
      "content": "社情民意收集",
      "perNoStandardVal": 0.5,
      "ruleContentDetail": "抽查信息未采集或采集采集错误,每次扣0.5分",
      "score": 10.0,
      "typeGroup": "手动打分"
    }, {
      "content": "网格上报三级以上事件的有效率",
      "perNoStandard": 1,
      "perNoStandardVal": 0.1,
      "ruleContentDetail": "有效率低于90的每下降一个百分点扣0.1分",
      "score": 10.0,
      "typeGroup": "手动打分"
    }]
  }, {
    "name": "加分事项",
    "ruleContentVos": [{
      "content": "巡查时长(工作日)",
      "isDailyAssessment": 1,
      "perNoStandardVal": 0.1,
      "ruleContentDetail": "超过 加0.1分",
      "typeGroup": "系统统计"
    }, {
      "content": "巡查里程(工作日)",
      "isDailyAssessment": 1,
      "perNoStandardVal": 0.2,
      "ruleContentDetail": "超过 加0.2分",
      "typeGroup": "系统统计"
    }, {
      "content": "事件新增数(有图)",
      "perNoStandard": 1,
      "perNoStandardVal": 0.5,
      "ruleContentDetail": "",
      "typeGroup": "系统统计",
      "upperLimit": 5.0
    }, {
      "content": "提前预警治安案件、火灾事件",
      "isDailyAssessment": 1,
      "perNoStandardVal": 2.0,
      "ruleContentDetail": "超过 加2.0分每预警null件加2.0分",
      "typeGroup": "手动打分"
    }, {
      "content": "提前预警刑案案件",
      "isDailyAssessment": 1,
      "perNoStandardVal": 4.0,
      "ruleContentDetail": "超过 加4.0分每预警null件加4.0分",
      "typeGroup": "手动打分"
    }, {
      "content": "提前预警到县集体访、进京赴省访",
      "isDailyAssessment": 1,
      "perNoStandardVal": 2.0,
      "ruleContentDetail": "超过 加2.0分每预警null件加2.0分",
      "typeGroup": "手动打分"
    }, {
      "content": "提前预警环境污染、地质灾害等较大以上案事件",
      "isDailyAssessment": 1,
      "perNoStandardVal": 2.0,
      "ruleContentDetail": "超过 加2.0分每预警null件加2.0分",
      "typeGroup": "手动打分"
    }]
  }],
  "score": 60.0
}
var data = value.ruleTableEvaluationVos
var html = "";
var itemForm =data.map(item => {
  var info = {
    name: item.name,
    items: [],
   }
   info['items'] = item.ruleContentVos.map(e => {
    console.log(e)
    if (e.perNoStandardVal == 0 || e.perNoStandardVal == '') { //eslint-disable-line
      e.perNoStandardVal = '-'
    }
    if (e.score === 0 || e.score === '' || !e.score) {
      e.score = '-'
    }
    if (e.ruleContentDetail === '') {
      e.ruleContentDetail = '-'
    }
      return [`${e.content}`, `${e.typeGroup}`, `${e.perNoStandardVal}`, `${e.score}`, `${e.ruleContentDetail}`,]
    })
  return info
})
console.log(itemForm)
  for( var i = 0; i < itemForm.length; i++ ) {
    var row = itemForm[i].items.length
    console.log(itemForm[i].items.length)
    for (var n = 0; n < itemForm[i].items.length; n++) {
    console.log(itemForm[i], itemForm[i].items[n])
      html += "<tr>";
      if(n === 0){
        html += "<td rowspan = " + row + ">" + itemForm[i].name + "</td>"
      }
      for(var m = 0; m < itemForm[i].items[n].length; m++) {
        html += "<td>" + itemForm[i].items[n][m] + "</td>"
      }
      html += "</tr>";
    }  
  }
  $("#J_TbData").html(html)

</script>
</body>
</html>

效果如图：