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

问题描述

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

以下正确的HTML代码：

promptText

解决方法

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

        <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>