如何在表

时间：2015-07-03 08:39:44

标签： javascript html-table 

<html class="no-js" lang="en">
<head>
    <script>
    function toggle() {
        if( document.getElementById("hidethis").style.display=='none' ){
        document.getElementById("hidethis").style.display = '';
        }else{
        document.getElementById("hidethis").style.display = 'none';
        }
    }
    </script>
    <script type="text/javascript">
        function insertTable()
        {
            debugger;
            if (document.getElementById("hidethis").style.display == 'none') {
                document.getElementById("hidethis").style.display = '';
                alert("yes");
                //var num_rows = document.getElementById('rows').value;
                //var num_cols = document.getElementById('cols').value;
                //var width = document.getElementById('width').value;
                var num_rows = 2;
                var num_cols = 2;
                var width = 10;
                var theader = "<table id='table1' width = ' " + width + "% '>";
                var tbody = "";

                for (var j = 0; j < num_cols; j++) {
                    theader += "<th>header col " + (j + 1) + " </th>";
                }

                for (var i = 0; i < num_rows; i++) {
                    tbody += "<tr>";
                    for (var j = 0; j < num_cols; j++) {
                        tbody += "<td>";
                        tbody += "?";
                        tbody += "</td>"
                    }
                    tbody += "</tr><br />";
                }
                var tfooter = "</table>";
                document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
            }
            else {
                document.getElementById("hidethis").style.display = 'none';
            }
        }
    </script>
    <style>
        #table1 {
            border: solid 1px;
            border-collapse: collapse;
        }

            #table1 th {
                border: solid 1px;
                border-collapse: collapse;
            }

            #table1 td {
                border: solid 1px;
                vertical-align: middle;
            }
    </style>
</head>
<body>.
    <div>
        <table id="tableID" border="1" height="50" width="100">
            <tr onclick="insertTable();">
                <td>A</td>
                <td>B</td>
                <td>C</td>
                <td>D</td>
            </tr>

            <tr>
                <td>
                    <table>
                        <tr id="hidethis">
                            <td id="wrapper"></td>
                        </tr>
                    </table>
                </td>
            </tr>
            <!--<tr>
                <td>
                    <table id="table" border="1" height="50" width="100">
                        <tr id="hidethis">
                            <td>I</td>
                            <td>J</td>
                            <td>K</td>
                            <td>L</td>
                        </tr>
                    </table>
                </td>
            </tr>-->
            <tr onclick="insertTable();">
                <td>E</td>
                <td>F</td>
                <td>G</td>
                <td>H</td>
            </tr>
        </table>
        <!--<div id="wrapper"></div>-->
    </div>
</body>
</html>   
    <html class="no-js" lang="en">
    <head>
        <script>
        function toggle() {
            if( document.getElementById("hidethis").style.display=='none' ){
            document.getElementById("hidethis").style.display = '';
            }else{
            document.getElementById("hidethis").style.display = 'none';
            }
        }
        </script>
        <script type="text/javascript">
            function insertTable()
            {
                debugger;
                if (document.getElementById("hidethis").style.display == 'none') {
                    document.getElementById("hidethis").style.display = '';
                    alert("yes");
                    //var num_rows = document.getElementById('rows').value;
                    //var num_cols = document.getElementById('cols').value;
                    //var width = document.getElementById('width').value;
                    var num_rows = 2;
                    var num_cols = 2;
                    var width = 10;
                    var theader = "<table id='table1' width = ' " + width + "% '>";
                    var tbody = "";

                    for (var j = 0; j < num_cols; j++) {
                        theader += "<th>header col " + (j + 1) + " </th>";
                    }

                    for (var i = 0; i < num_rows; i++) {
                        tbody += "<tr>";
                        for (var j = 0; j < num_cols; j++) {
                            tbody += "<td>";
                            tbody += "?";
                            tbody += "</td>"
                        }
                        tbody += "</tr><br />";
                    }
                    var tfooter = "</table>";
                    document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
                }
                else {
                    document.getElementById("hidethis").style.display = 'none';
                }
            }
        </script>
        <style>
            #table1 {
                border: solid 1px;
                border-collapse: collapse;
            }

                #table1 th {
                    border: solid 1px;
                    border-collapse: collapse;
                }

                #table1 td {
                    border: solid 1px;
                    vertical-align: middle;
                }
        </style>
    </head>
    <body>.
        <div>
            <table id="tableID" border="1" height="50" width="100">
                <tr onclick="insertTable();">
                    <td>A</td>
                    <td>B</td>
                    <td>C</td>
                    <td>D</td>
                </tr>

                <tr>
                    <td>
                        <table>
                            <tr id="hidethis">
                                <td id="wrapper"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <!--<tr>
                    <td>
                        <table id="table" border="1" height="50" width="100">
                            <tr id="hidethis">
                                <td>I</td>
                                <td>J</td>
                                <td>K</td>
                                <td>L</td>
                            </tr>
                        </table>
                    </td>
                </tr>-->
                <tr onclick="insertTable();">
                    <td>E</td>
                    <td>F</td>
                    <td>G</td>
                    <td>H</td>
                </tr>
            </table>
            <!--<div id="wrapper"></div>-->
        </div>
    </body>
    </html>

我创建了这种类型的表，但我的要求是，如果我将点击第一行大厅行，然后在第一行下面打开表，如果我将点击第二行，则在第二行下面打开相同的表。 / p>

1 个答案:

答案 0 :(得分：0)

退房..只需在您的代码中应用几个逻辑

<html class="no-js" lang="en">
<head>
    <script>
        function toggle() {
            if (document.getElementById("hidethis").style.display == 'none') {
                document.getElementById("hidethis").style.display = '';
            } else {
                document.getElementById("hidethis").style.display = 'none';
            }
        }
    </script>
    <script type="text/javascript">
        function insertTable_1() {

            console.log(tempp);
            debugger;

            if (document.getElementById("hidethis").style.display == 'none') {
                document.getElementById("hidethis").style.display = '';

                //var num_rows = document.getElementById('rows').value;
                //var num_cols = document.getElementById('cols').value;
                //var width = document.getElementById('width').value;
                var num_rows = 2;
                var num_cols = 2;
                var width = 10;
                var theader = "<table id='table1' width = ' " + width + "% '>";
                var tbody = "";
                for (var j = 0; j < num_cols; j++) {
                    theader += "<th>header col " + (j + 1) + " </th>";

                    for (var i = 0; i < num_rows; i++) {
                        tbody += "<tr>";
                        for (var j = 0; j < num_cols; j++) {
                            tbody += "<td>";
                            tbody += "?";
                            tbody += "</td>"
                        }
                        tbody += "</tr><br />";
                    }
                    var tfooter = "</table>";
                    document.getElementById("wrapper").innerHTML = theader + tbody + tfooter;
                    document.getElementById("hidethis_2").style.display = 'none';

                }
            else
                {
                    document.getElementById("hidethis").style.display = 'none';
                    document.getElementById("hidethis_2").style.display = 'none';

                }
            }

            function insertTable_2() {
                if (document.getElementById("hidethis_2").style.display == 'none') {
                    document.getElementById("hidethis_2").style.display = '';

                    //var num_rows = document.getElementById('rows').value;
                    //var num_cols = document.getElementById('cols').value;
                    //var width = document.getElementById('width').value;
                    var num_rows = 2;
                    var num_cols = 2;
                    var width = 10;
                    var theader = "<table id='table1' width = ' " + width + "% '>";
                    var tbody = "";
                    for (var j = 0; j < num_cols; j++) {
                        theader += "<th>header col " + (j + 1) + " </th>";
                    }
                    for (var i = 0; i < num_rows; i++) {
                        tbody += "<tr>";
                        for (var j = 0; j < num_cols; j++) {
                            tbody += "<td>";
                            tbody += "?";
                            tbody += "</td>"
                        }
                        tbody += "</tr><br />";
                    }
                    var tfooter = "</table>";
                }
                document.getElementById("wrapper_second").innerHTML = theader + tbody + tfooter;
                document.getElementById("hidethis").style.display = 'none';

            }

        else
            {
                document.getElementById("hidethis_2").style.display = 'none';
                document.getElementById("hidethis").style.display = 'none';

            }
        }

    </script>
    <style>
        #table1 {
            border: solid 1px;
            border-collapse: collapse;
        }

        #table1 th {
            border: solid 1px;
            border-collapse: collapse;
        }

        #table1 td {
            border: solid 1px;
            vertical-align: middle;
        }
    </style>
</head>
<body>.
<div>
    <table id="tableID" border="1" height="50" width="100">
        <tr onclick="insertTable_1();">
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
        </tr>

        <tr>
            <td>
                <table>
                    <tr id="hidethis">
                        <td id="wrapper"></td>
                    </tr>
                </table>
            </td>
        </tr>
        <!--<tr>
            <td>
                <table id="table" border="1" height="50" width="100">
                    <tr id="hidethis">
                        <td>I</td>
                        <td>J</td>
                        <td>K</td>
                        <td>L</td>
                    </tr>
                </table>
            </td>
        </tr>-->
        <tr onclick="insertTable_2();">
            <td>E</td>
            <td>F</td>
            <td>G</td>
            <td>H</td>
        </tr>
        <tr>
            <td>
                <table>
                    <tr id="hidethis_2">
                        <td id="wrapper_second"></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <!--<div id="wrapper"></div>-->
</div>
</body>
</html>
相关问题
最新问题