{"id":3961,"date":"2018-06-08T20:40:20","date_gmt":"2018-06-08T12:40:20","guid":{"rendered":"https:\/\/ixyzero.com\/blog\/?p=3961"},"modified":"2018-06-08T20:40:20","modified_gmt":"2018-06-08T12:40:20","slug":"html%e4%b8%ad%e7%89%b9%e5%ae%9atable%e6%a0%b7%e5%bc%8f%e7%9a%84%e5%88%86%e6%9e%90%e5%92%8c%e7%94%9f%e6%88%90","status":"publish","type":"post","link":"https:\/\/ixyzero.com\/blog\/archives\/3961.html","title":{"rendered":"HTML\u4e2d\u7279\u5b9atable\u6837\u5f0f\u7684\u5206\u6790\u548c\u751f\u6210"},"content":{"rendered":"

=Start=<\/p>\n

\u7f18\u7531\uff1a<\/h4>\n

\u5728\u5904\u7406\u4e00\u4e2a\u9700\u6c42\u7684\u65f6\u5019\u78b0\u5230\u7684\u95ee\u9898\uff0c\u89c9\u5f97\u4ee5\u540e\u53ef\u80fd\u4f1a\u7528\u5230\u8fd9\u4e2a\u6216\u8005\u7c7b\u4f3c\u7684\u77e5\u8bc6\u70b9\uff0c\u6240\u4ee5\u5728\u6b64\u8bb0\u5f55\u4e00\u4e0b\uff0c\u65b9\u4fbf\u4ee5\u540e\u53c2\u8003\u3002<\/p>\n

\u6b63\u6587\uff1a<\/h4>\n

\u53c2\u8003\u89e3\u7b54\uff1a<\/h5>\n

\u5e38\u89c4\u7684\u5355\u884cHTML\u8868\u683c\u751f\u6210\u6bd4\u8f83\u7b80\u5355\uff0c\u53ef\u4ee5\u53c2\u8003\u4e00\u4e0b\u4e4b\u524d\u8bb0\u5f55\u7684\u6587\u7ae0\u300a\u5982\u4f55\u8ba9\u90ae\u4ef6\u4e2d\u5c55\u793a\u7684table\u8868\u683c\u66f4\u987a\u773c\uff1f<\/a>\u300b\uff0c\u5927\u81f4\u6548\u679c\u662f\uff1a<\/p>\n

\"\"<\/p>\n

\u7528Python\u6216\u662f\u5176\u5b83\u7f16\u7a0b\u8bed\u8a00\u7684\u4ee3\u7801\u5b9e\u73b0\u65b9\u5f0f\u5c31\u662f\u2014\u2014\u5148\u521b\u5efa\u4e00\u4e2alist\uff0c\u7136\u540e\u5faa\u73af\u7ec4\u88c5\u6bcf\u4e00\u5217\u7684\u5185\u5bb9\u4f5c\u4e3a\u5143\u7d20append\u5230list\u91cc\u9762\uff0c\u7136\u540estr.join\u628alist\u7684\u5185\u5bb9\u8fde\u63a5\u8d77\u6765\u4f5c\u4e3a\u5185\u5bb9\u5373\u53ef\u3002<\/p>\n

\u4f46\u662f\uff0c\u73b0\u5728\u6709\u4e2a\u9700\u6c42\u5c31\u662f\u90e8\u5206\u884c\u76f8\u540c\u7684\u5185\u5bb9\u8981\u5408\u5e76\u5c55\u793a\uff0c\u6bd4\u5982\uff1a<\/p>\n

\"\"<\/p>\n

\u8fd9\u5c31\u4e0d\u592a\u597d\u5904\u7406\u4e86\uff0c\u4f46\u4e5f\u4e0d\u662f\u5b8c\u5168\u5904\u7406\u4e0d\u4e86\uff0c\u53ea\u4e0d\u8fc7\u76f8\u5bf9\u4e8e\u4e4b\u524d\u7684for\u5faa\u73af\u6765\u8bf4\u8fd8\u662f\u8981\u590d\u6742\u4e00\u4e9b\uff0c\u9700\u8981\uff1a<\/p>\n

    \n
  1. \u5148\u6392\u5e8f\uff0c\u5c06\u76f8\u540c\u7684item\u5206\u7ec4\uff1b<\/li>\n
  2. \u518d\u6839\u636e\u5206\u7ec4\u7684\u5927\u5c0f\u6765\u8bbe\u7f6e\u7ec4\u5185\u7b2c\u4e00\u884c\u7684rowspan\u5c5e\u6027\u503c\uff1b<\/li>\n
  3. \u7ec4\u5185\u5176\u5b83\u884c\u7684td\u4e2a\u6570\u8981\u914c\u60c5\u51cf\u5c11\uff0c\u5426\u5219\u4f1a\u51fa\u73b0\u8d8a\u754c\u7684\u60c5\u51b5\u3002<\/li>\n<\/ol>\n

    \u4e0b\u9762\u5148\u653e\u6d4b\u8bd5\u8fc7\u7a0b\u4e2d\u4ea7\u751f\u7684\u5404\u79cdtable\u6837\u5f0f\u5bf9\u6bd4\uff1a<\/p>\n

    \"\"<\/p>\n

    \u518d\u653e\u5bf9\u5e94\u7684HTML\u6e90\u6587\u4ef6\u6765\u5206\u6790\u539f\u56e0\uff1a<\/p>\n

    \"\"<\/p>\n

    \u6700\u540e\u518d\u653e\u76f8\u5e94\u7684Python\u4ee3\u7801\uff1a<\/p>\n

    #!\/usr\/bin\/env python\r\n# coding=utf-8\r\n\r\ntable_style = \"\"\"\r\n<style>\r\ntable {\r\n    border-collapse: collapse;\r\n}\r\ntable, td, th {\r\n    border: 1px solid black;\r\n    text-align: center;\r\n}\r\nth {\r\n    background-color: #e0e0e0;\r\n    color: black;\r\n}\r\ntr:hover {background-color: #f5f5f5;}\r\ntr:nth-child(even) {background-color: #f2f2f2;}\r\n<\/style>\r\n\"\"\"\r\n\r\n\r\nresult_list = [\r\n    '2018-05-02 11:27:43,operate_user1,target_user1',\r\n    '2018-05-02 11:47:33,operate_user1,target_user2',\r\n    '2018-05-02 11:53:06,operate_user2,target_user2',\r\n    '2018-05-03 17:23:28,operate_user3,target_user3',\r\n]\r\n\r\nresult = {\r\n    'operate_user1': [\r\n        '2018-05-02 11:27:43,operate_user1,target_user1',\r\n        '2018-05-02 11:47:33,operate_user1,target_user2',\r\n    ],\r\n    'operate_user2': [\r\n        '2018-05-02 11:53:06,operate_user2,target_user2',\r\n    ],\r\n    'operate_user3': [\r\n        '2018-05-03 17:23:28,operate_user3,target_user3',\r\n    ],\r\n}\r\n\r\n# '{0},{1},{2}'.format(_datetime, operate_name, target_name)\r\n\r\nresult_content = [ table_style ]\r\nresult_content.append('<div>\\n<table>\\n<tr><th>\u65e5\u671f<\/th><th>\u65f6\u95f4<\/th><th>\u64cd\u4f5c\u4eba<\/th><th>\u64cd\u4f5c\u7c7b\u578b<\/th><th>\u88ab\u64cd\u4f5c\u5bf9\u8c61<\/th><th>\u64cd\u4f5c\u5b57\u6bb5<\/th><th>\u603b\u64cd\u4f5c\u6b21\u6570<\/th><\/tr>\\n')\r\nfor k, v in sorted(result.items()):\r\n    if len(v) > 1:\r\n        _date, _time, _operate, _target = v[0].replace(' ', ',').split(',')\r\n        result_content.append('<tr><td>{0}<\/td><td>{1}<\/td><td rowspan=\"{4}\">{2}<\/td><td rowspan=\"{4}\">\u67e5\u8be2<\/td><td>{3}<\/td><td>\u5b57\u6bb5A<\/td><td rowspan=\"{4}\">{4}<\/td><\/tr>\\n'.format(_date, _time, _operate, _target, len(v)))\r\n        for item in v[1:]:\r\n            _date, _time, _operate, _target = item.replace(' ', ',').split(',')\r\n            # result_content.append('<tr><td>{0}<\/td><td>{1}<\/td><td>{2}<\/td><td>\u67e5\u8be2<\/td><td>{3}<\/td><td>\u5b57\u6bb5A<\/td><td>{4}<\/td><\/tr>\\n'.format(_date, _time, _operate, _target, len(v)))\r\n            result_content.append('<tr><td>{0}<\/td><td>{1}<\/td><td>{3}<\/td><td>\u5b57\u6bb5A<\/td><\/tr>\\n'.format(_date, _time, _operate, _target))\r\n    else:\r\n        _date, _time, _operate, _target = v[0].replace(' ', ',').split(',')\r\n        result_content.append('<tr><td>{0}<\/td><td>{1}<\/td><td>{2}<\/td><td>\u67e5\u8be2<\/td><td>{3}<\/td><td>\u5b57\u6bb5A<\/td><td>{4}<\/td><\/tr>\\n'.format(_date, _time, _operate, _target, 1))\r\nresult_content.append('<\/table>\\n<\/div>')\r\n\r\nwith open('display.html', 'w') as fp:\r\n    fp.write(''.join(result_content))<\/pre>\n
     <\/p>\n
    \u53c2\u8003\u94fe\u63a5\uff1a<\/h5>\n