Created
March 25, 2014 09:47
-
-
Save i5ting/9758283 to your computer and use it in GitHub Desktop.
简单算法，tr和td生成how_to_create_rowspan_table
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title> | |
| 简单算法，tr和td生成how_to_create_rowspan_table | |
| </title> | |
| <meta charset='utf-8'/> | |
| <script type="text/javascript" src="js/jquery.js"></script> | |
| <script> | |
| /** | |
| * 处理tr | |
| */ | |
| function create_tr_with_task(task_items_count){ | |
| var html = ''; | |
| for(var i = 0; i < task_items_count; i++){ | |
| var t = create_td(i,task_items_count); | |
| console.log(i+': '+t); | |
| html += '<tr>' + t + '</tr>'; | |
| } | |
| $('table').first().append(html); | |
| } | |
| /** | |
| * 处理td | |
| */ | |
| function create_td(current_line_number, task_items_count){ | |
| var td_html = ''; | |
| // 第一个tr有3列 | |
| if(current_line_number == 0){ | |
| for(var i = 0; i < 3; i++){ | |
| // 第一个tr的第一个列，有rowspan，其他列无 | |
| if(i == 0){ | |
| td_html += '<td rowspan='+ task_items_count +'>'; | |
| td_html += '</td>'; | |
| }else{ | |
| td_html += '<td>'; | |
| td_html += '</td>'; | |
| } | |
| } | |
| }else{ | |
| // 其他tr只有2列 | |
| for(var i = 0; i < 2; i++){ | |
| td_html += '<td>'; | |
| td_html += '</td>'; | |
| } | |
| } | |
| // console.log(td_html); | |
| return td_html; | |
| } | |
| $(document).ready(function() { | |
| // main入口 | |
| create_tr_with_task(4); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <table border='1'> | |
| <tr> | |
| <td>任务名称</td> | |
| <td>子任务</td> | |
| <td>是否完成</td> | |
| </tr> | |
| </table> | |
| </body> | |
| <html> | |
| </title> | |
| <meta charset='utf-8'/> | |
| <script type="text/javascript" src="js/jquery.js"></script> | |
| <script> | |
| /** | |
| * 处理tr | |
| */ | |
| function create_tr_with_task(task_items_count){ | |
| var html = ''; | |
| for(var i = 0; i < task_items_count; i++){ | |
| var t = create_td(i,task_items_count); | |
| console.log(i+': '+t); | |
| html += '<tr>' + t + '</tr>'; | |
| } | |
| $('table').first().append(html); | |
| } | |
| /** | |
| * 处理td | |
| */ | |
| function create_td(current_line_number, task_items_count){ | |
| var td_html = ''; | |
| // 第一个tr有3列 | |
| if(current_line_number == 0){ | |
| for(var i = 0; i < 3; i++){ | |
| // 第一个tr的第一个列，有rowspan，其他列无 | |
| if(i == 0){ | |
| td_html += '<td rowspan='+ task_items_count +'>'; | |
| td_html += '</td>'; | |
| }else{ | |
| td_html += '<td>'; | |
| td_html += '</td>'; | |
| } | |
| } | |
| }else{ | |
| // 其他tr只有2列 | |
| for(var i = 0; i < 2; i++){ | |
| td_html += '<td>'; | |
| td_html += '</td>'; | |
| } | |
| } | |
| // console.log(td_html); | |
| return td_html; | |
| } | |
| $(document).ready(function() { | |
| // main入口 | |
| create_tr_with_task(4); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <table border='1'> | |
| <tr> | |
| <td>任务名称</td> | |
| <td>子任务</td> | |
| <td>是否完成</td> | |
| </tr> | |
| </table> | |
| </body> | |
| <html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment