HTML CSS 如何使用 JavaScript 从 2D 表格制作动态多列表答案

【问题标题】：HTML CSS how to make a dynamic multicolumn table from a 2D table with JavaScriptHTML CSS 如何使用 JavaScript 从 2D 表格制作动态多列表
【发布时间】：2020-08-14 18:56:44
【问题描述】：

我想从静态 2D 表中创建一个动态多列表，如下图所示（参见解决方案）：

正确的 HTML 代码如下：

        <div class="container">
        <table border='1' id='theTable'>
            <thead>
            <tr>
              <th>Name</th>
              <th>Role</th> 
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>Adam</td>
              <td>AAA</td>
            </tr>
            <tr>
              <td>Adam</td>
              <td>BBB</td>
            </tr>
            <tr>
              <td>Adam</td>
              <td>CCC</td>
            </tr>
            <tr>
              <td>Bert</td>
              <td>AAA</td>
            </tr>
            <tr>
              <td>Bert</td>
              <td>CCC</td>
            </tr>
            <tr>
              <td>Cesar</td>
              <td>BBB</td>
            </tr>
            </tbody>
          </table>
        <br>
        <table id='newTable' border='1'>
            <thead></thead>
            <tbody></tbody>
            
        </table>

        
    </div>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>

         $(document).ready(function () {  
            var role_arr = [];
            $("#theTable td:nth-child(2)").each(function() {
                if ($.inArray($(this).text(), role_arr) == -1)
                    role_arr.push($(this).text());
            });
            
            role_arr.sort()

            console.log(role_arr);
            // create thead row and put Roles in it
            var trow = "<tr>";
            trow += '<th>Name</th>';
            for (var i=0; i<role_arr.length; i++) {
                trow +='<th>'+ role_arr[i] +'</th>';                    
            }
            trow += '</tr>';
            
            $("#newTable").find("thead").append(trow);
            
            // create all names array
            var name_arr = [];
            $("#theTable td:nth-child(1)").each(function() {
                if ($.inArray($(this).text(), name_arr) == -1)
                    name_arr.push($(this).text());
            });
            
            console.log(name_arr);  
            
            for (var i=0; i<name_arr.length; i++) {
                // create an array for each name's roles
                var row_arr = [];
                $("#theTable tr:has(td:contains('"+name_arr[i]+"'))").each(function () {
                    //console.log($(this).find('td:nth-child(2)').text());
                    row_arr.push($(this).find('td:nth-child(2)').text());
                });
                // create the table body row row
                var trow = "<tr>";
                trow += '<td>'+name_arr[i]+'</td>';   
                for(var j=0; j<role_arr.length; j++) {
                    if(row_arr.includes(role_arr[j])) {
                        trow += '<td> X </td>';
                    }
                    else {
                        trow += '<td> - </td>';
                    }                         
                }
                trow += '</tr>';
                $("#newTable").find("tbody").append(trow);
            }

        });

    </script>

【问题讨论】：

首先将数据包装在 thead 和 tbody 中，以将标头与数据分开
感谢好主意，我现在就这样做了。
AFAIK 这不是 HTML+CSS 能够做到的。您需要在后端呈现此 HTML 或在前端使用 JavaScript。

标签： javascript html css html-table

【解决方案1】：

我使用 jquery 来遍历表。首先创建所有不同的角色数组，然后创建个人名称数组。然后为每个名称创建单独的行。我在代码中添加了 cmets。

        <div class="container">
        <table border='1' id='theTable'>
            <thead>
            <tr>
              <th>Name</th>
              <th>Role</th> 
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>Adam</td>
              <td>AAA</td>
            </tr>
            <tr>
              <td>Adam</td>
              <td>BBB</td>
            </tr>
            <tr>
              <td>Adam</td>
              <td>CCC</td>
            </tr>
            <tr>
              <td>Bert</td>
              <td>AAA</td>
            </tr>
            <tr>
              <td>Bert</td>
              <td>CCC</td>
            </tr>
            <tr>
              <td>Cesar</td>
              <td>BBB</td>
            </tr>
            </tbody>
          </table>
        <br>
        <table id='newTable' border='1'>
            <thead></thead>
            <tbody></tbody>
            
        </table>

        
    </div>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>

         $(document).ready(function () {  
            var role_arr = [];
            $("#theTable td:nth-child(2)").each(function() {
                if ($.inArray($(this).text(), role_arr) == -1)
                    role_arr.push($(this).text());
            });
            
            console.log(role_arr);
            // create thead row and put Roles in it
            var trow = "<tr>";
            trow += '<th>Name</th>';
            for (var i=0; i<role_arr.length; i++) {
                trow +='<th>'+ role_arr[i] +'</th>';                    
            }
            trow += '</tr>';
            
            $("#newTable").find("thead").append(trow);
            
            // create all names array
            var name_arr = [];
            $("#theTable td:nth-child(1)").each(function() {
                if ($.inArray($(this).text(), name_arr) == -1)
                    name_arr.push($(this).text());
            });
            
            console.log(name_arr);  
            
            for (var i=0; i<name_arr.length; i++) {
                // create an array for each name's roles
                var row_arr = [];
                $("#theTable tr:has(td:contains('"+name_arr[i]+"'))").each(function () {
                    //console.log($(this).find('td:nth-child(2)').text());
                    row_arr.push($(this).find('td:nth-child(2)').text());
                });
                // create the table body row row
                var trow = "<tr>";
                trow += '<td>'+name_arr[i]+'</td>';   
                for(var j=0; j<role_arr.length; j++) {
                    if(row_arr.includes(role_arr[j])) {
                        trow += '<td> X </td>';
                    }
                    else {
                        trow += '<td> - </td>';
                    }                         
                }
                trow += '</tr>';
                $("#newTable").find("tbody").append(trow);
            }

        });

    </script>

【讨论】：