javascript - Problem with generating tables using js. colspan is not fixed.

Question

    var json = [{
        "name": "客户姓名",
        "englishname": "client_name",
        "sewup": "N",
        "relate_id": "97247"
    }, {
        "name": "下单日期",
        "englishname": "order_date",
        "sewup": "N",
        "relate_id": "97250"
    }, {
        "name": "收货地址",
        "englishname": "address",
        "sewup": "I",
        "relate_id": "97274"
    }, {
        "name": "发货方式",
        "englishname": "express_name",
        "sewup": "N",
        "relate_id": "97256"
    }, {
        "name": "订单编号",
        "englishname": "order_number",
        "sewup": "N",
        "relate_id": "97259"
    }, {
        "name": "所属店铺",
        "englishname": "shop",
        "sewup": "N",
        "relate_id": "97271"
    }, {
        "name": "印刷定制",
        "englishname": "custom",
        "sewup": "I",
        "relate_id": "97268"
    }, {
        "name": "默认账户",
        "englishname": "default_bank",
        "sewup": "N",
        "relate_id": "97262"
    }, {
        "name": "发票收据",
        "englishname": "need_invoice",
        "sewup": "N",
        "relate_id": "97265"
    }];

        /**
        *sewup为 N 表示此对象占一个单元格. 为I表示此对象独占一行
        *表格列数为3
        *求大神写个算法生成如下表格
        */

Answer 1

I revised it again, writing it more rigorously~~

  var json = [{"name":"客户姓名","englishname":"client_name","sewup":"N","relate_id":"97247"},{"name":"下单日期","englishname":"order_date","sewup":"N","relate_id":"97250"},{"name":"收货地址","englishname":"address","sewup":"I","relate_id":"97274"},{"name":"发货方式","englishname":"express_name","sewup":"N","relate_id":"97256"},{"name":"订单编号","englishname":"order_number","sewup":"N","relate_id":"97259"},{"name":"所属店铺","englishname":"shop","sewup":"N","relate_id":"97271"},{"name":"印刷定制","englishname":"custom","sewup":"I","relate_id":"97268"},{"name":"默认账户","englishname":"default_bank","sewup":"N","relate_id":"97262"},{"name":"发票收据","englishname":"need_invoice","sewup":"N","relate_id":"97265"}];
 
    var html = ''; var settrhtml = '';var setaddhtml = '';var setnumber = 1;
    for(key in json) {
        if(json[key]['sewup'] == 'N') {
            if(setnumber > 3) {
                setnumber = 1;
                html += '<tr>'+settrhtml+'</tr>';
                if(setaddhtml) {
                    html += setaddhtml;
                    setaddhtml = '';
                }
                settrhtml = '';
            }
            setnumber++;
            settrhtml += '<td>'+json[key]['name']+'</td>';
        } else {
            if(!settrhtml) {
                 html += '<tr><td colspan="3">'+json[key]['name']+'</td></tr>';
            } else {
                setaddhtml += '<tr><td colspan="3">'+json[key]['name']+'</td></tr>';
            }
           
       }
    }
    if(settrhtml) {
        html += '<tr>'+settrhtml+'</tr>';
    }
    html += setaddhtml;
    html = '<table border="1">'+html+'</table>';
    $("#main").append(html);

Answer 2

I wrote a jquery plug-in directly for you. For example, name it jquery.jstable.js

(function($) {
  function JsTable (ele, opts) {
    this.ele = ele; //表格dom
    this.opts = opts; // 数据
    this.init();
  }
  JsTable.prototype.init = function () {
    var ele = this.ele, data = this.opts;
    var html = '', trHtml = '';
    if (data.length == 0) {
      trHtml = '<tr>暂无数据</tr>';
      return;
    }
    for (var i = 0, len = data.length; i < len; i++) {
      var data_ele = data[i];
      console.log(len);
      if (data_ele.sewup.toUpperCase() == 'N') {
        trHtml += '<td>' + data_ele.name + '</td>';
      }else {
        trHtml += '<tr>';
        trHtml += '<td colspan = "3">' + data_ele.name + '</td>';
        trHtml += '</tr>';
      }
    }
    html += '<tr>' + trHtml + '</tr>';
    $(ele).html(html);
  };
  $.extend({
    jsTable: function(ele, opts) {
      new JsTable(ele, opts);
    }
  })
})(jQuery);

// Calling method

You need to reference jquery and plug-in js first

Answer 3

Personally, I think you can add a marker to the data and use the marker to determine whether colspan is needed. This saves both worry and effort

Answer 4

It is recommended that the poster use artTemplate instead
1. No need to spell strings anymore
2. The code is clean and tidy
3. No need to check for nulls
4. Lay the foundation for future front-end and back-end separation
...

What else are you thinking about? Try it now! ! !