根据第一列条件合并表格中后面相同的列

最新推荐文章于 2022-06-16 11:01:38 发布

MR丶CHAN

最新推荐文章于 2022-06-16 11:01:38 发布

阅读量829

点赞数

文章标签： xhtml json html border function 文档

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="tab">
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>22</td>
        <td>数学</td>
        <td>90</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>22</td>
        <td>语文</td>
        <td>70</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>22</td>
        <td>英语</td>
        <td>60</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>19</td>
        <td>数学</td>
        <td>60</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>19</td>
        <td>语文</td>
        <td>60</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>男</td>
        <td>19</td>
        <td>英语</td>
        <td>60</td>
    </tr>
</table>
<script>
window.onload=function(){
    var tab = document.getElementById("tab");
    var array = new Array();
    while((e = tab.rows[0]) != null){
        var json = {"name":e.cells[0].innerHTML, "sex":e.cells[1].innerHTML, "age":e.cells[2].innerHTML,
                "course":e.cells[3].innerHTML, "score":e.cells[4].innerHTML};
        array.push(json);
        tab.deleteRow(0);
    }

    var row = tab.insertRow(-1);
    var cell = row.insertCell(-1);
    cell.innerHTML = array[0].name;
    cell = row.insertCell(-1);
    cell.innerHTML = array[0].sex;
    cell = row.insertCell(-1);
    cell.innerHTML = array[0].age;
    cell = row.insertCell(-1);
    cell.innerHTML = array[0].course;
    cell = row.insertCell(-1);
    cell.innerHTML = array[0].score;
    var first = 0;
    var rowspan = 1;
    for(var i = 1; i < array.length; i++){
        if(array[i].name == array[i - 1].name
            && array[i].sex == array[i - 1].sex
            && array[i].age == array[i - 1].age ){
            rowspan++;

            row = tab.insertRow(-1);
            tab.rows[first].cells[0].rowSpan = rowspan;
            tab.rows[first].cells[1].rowSpan = rowspan;
            tab.rows[first].cells[2].rowSpan = rowspan;
            cell = row.insertCell(-1);
            cell.innerHTML = array[i].course;
            cell = row.insertCell(-1);
            cell.innerHTML = array[i].score;
        }else{
            first = i;
            rowspan = 1;

            row = tab.insertRow(-1);
            cell = row.insertCell(-1);
            cell.innerHTML = array[i].name;
            cell = row.insertCell(-1);
            cell.innerHTML = array[i].sex;
            cell = row.insertCell(-1);
            cell.innerHTML = array[i].age;
            cell = row.insertCell(-1);
            cell.innerHTML = array[i].course;
            cell = row.insertCell(-1);
            cell.innerHTML = array[i].score;
        }
    }
}
</script>
</body>
</html>