一个表格转换问题。。求大神

nitaiyoucala 2018-03-06 05:12:53

用jquery实现表格1转换到表格2 （日期后面有更多，可能有2017-06-15,2017-06-16.......2017-06-20)

代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="Javascript/Plugins/jquery-1.11.2.min.js"></script>

</head>

<body>

    表格1如下：<br />

    <table cellspacing="0" border="1" id="GridView1" style="border-collapse:collapse;">

        <tbody>

            <tr>

                <th></th>

                <th>2017-06-13新增测试</th>

                <th>2017-06-13提交测试</th>

                <th>2017-06-14新增测试</th>

                <th>2017-06-14提交测试</th>

            </tr>

            <tr>

                <td>测试一</td>

                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

            </tr>

            <tr>

                <td>测试二</td>

                <td>1</td>

                <td>2</td>

                <td>443</td>

                <td>44</td>

            </tr>

        </tbody>

    </table>

    <br />

    表格2如下：<br />

    <table cellspacing="0" border="1" id="GridView1" style="border-collapse:collapse;">

        <tbody>

            <tr>

                <th></th>

                <th colspan="2">2017-06-13</th>

                <th colspan="2">2017-06-14</th>

               

            </tr>

            <tr>

                <th>部门</th>

                <th>新增测试</th>

                <th>提交测试</th>

                <th>新增测试</th>

                <th>提交测试</th>

            </tr>

            <tr>

                <td>测试一</td>

                <td>1</td>

                <td>2</td>

                <td>3</td>

                <td>4</td>

            </tr>

            <tr>

                <td>测试二</td>

                <td>1</td>

                <td>2</td>

                <td>443</td>

                <td>44</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

...全文

320 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

nitaiyoucala 2018-03-07

打赏
举报

引用 1 楼 apollokk 的回复:

    var firstrow = $('#GridView1 tr:first'), seconedrow = firstrow.clone();
    firstrow.find('th').each(function () {
        $(this).text(/\d{4}-\d{1,2}-\d{1,2}/.exec($(this).text()));
    });
    seconedrow.find('th').each(function (index, element) {
        if (index == 0) {
            $(this).text('部门');
        } else {
            $(this).text($(this).text().replace(/\d{4}-\d{1,2}-\d{1,2}/, ''));
        }
    });
    seconedrow.insertAfter(firstrow);
    var firstths = firstrow.find('th');
    firstths[0].innerHTML = '';
    for (var i = 1, l = firstths.length - 1; i < l; i++) {
        var colspan = $(firstths[i]).prop('colspan') || 1;
        if ($(firstths[i]).text() == $(firstths[i + 1]).text()) {
            $(firstths[i]).prop('colspan', colspan + 1);
            $(firstths[i + 1]).css({ display: 'none' });
        }
    }

这样可以了 var firstrow = $('#GridView1 tr:eq(0)')

nitaiyoucala 2018-03-07

打赏
举报

引用 1 楼 apollokk 的回复:

    var firstrow = $('#GridView1 tr:first'), seconedrow = firstrow.clone();
    firstrow.find('th').each(function () {
        $(this).text(/\d{4}-\d{1,2}-\d{1,2}/.exec($(this).text()));
    });
    seconedrow.find('th').each(function (index, element) {
        if (index == 0) {
            $(this).text('部门');
        } else {
            $(this).text($(this).text().replace(/\d{4}-\d{1,2}-\d{1,2}/, ''));
        }
    });
    seconedrow.insertAfter(firstrow);
    var firstths = firstrow.find('th');
    firstths[0].innerHTML = '';
    for (var i = 1, l = firstths.length - 1; i < l; i++) {
        var colspan = $(firstths[i]).prop('colspan') || 1;
        if ($(firstths[i]).text() == $(firstths[i + 1]).text()) {
            $(firstths[i]).prop('colspan', colspan + 1);
            $(firstths[i + 1]).css({ display: 'none' });
        }
    }

没反应。。。这里是不是有问题 $('#GridView1 tr:first')

Hello World, 2018-03-06

打赏
举报

    var firstrow = $('#GridView1 tr:first'), seconedrow = firstrow.clone();
    firstrow.find('th').each(function () {
        $(this).text(/\d{4}-\d{1,2}-\d{1,2}/.exec($(this).text()));
    });
    seconedrow.find('th').each(function (index, element) {
        if (index == 0) {
            $(this).text('部门');
        } else {
            $(this).text($(this).text().replace(/\d{4}-\d{1,2}-\d{1,2}/, ''));
        }
    });
    seconedrow.insertAfter(firstrow);
    var firstths = firstrow.find('th');
    firstths[0].innerHTML = '';
    for (var i = 1, l = firstths.length - 1; i < l; i++) {
        var colspan = $(firstths[i]).prop('colspan') || 1;
        if ($(firstths[i]).text() == $(firstths[i + 1]).text()) {
            $(firstths[i]).prop('colspan', colspan + 1);
            $(firstths[i + 1]).css({ display: 'none' });
        }
    }