Question

我正在尝试将多级无序列表解析为表。

我有像

这样的当前代码

<ul id="menu">
    <li><a href="#home">Homepage</a></li>
    <li class="dropdown"><a href="#1">Main Item 1</a>
        <ul>
            <li><a href="#11">Sub Item 1.1</a></li>
            <li><a href="#12">Sub Item 1.2</a></li>
            <li><a href="#13">Sub Item 1.3</a></li>
            <li><a href="#14">Sub Item 1.4</a></li>
        </ul>
    </li>
    <li class="dropdown"><a href="#2">Main Item 2</a>
        <ul>
            <li><a href="#21">Sub Item 2.1</a></li>
            <li><a href="#22">Sub Item 2.2</a></li>
            <li><a href="#23">Sub Item 2.3</a></li>
        </ul>
    </li>
    <li class="dropdown"><a href="#3">Main Item 3</a>
        <ul>
            <li><a href="#31">Sub Item 3.1</a></li>
            <li><a href="#32">Sub Item 3.2</a></li>
        </ul>
    </li>
</ul>

我希望列表变成表格：

<table class="table">
    <thead>
        <tr><th>Main Item 1</th><th>Main Item 2</th><th>Main Item 3</th></tr>
    </thead>
    <tbody>
       <tr><td>Sub Item 1.1</td><td>Sub Item 2.1</td><td>Sub Item 3.1</td></tr>
       <tr><td>Sub Item 1.2</td><td>Sub Item 2.2</td><td>Sub Item 3.2</td></tr>
       <tr><td>Sub Item 1.3</td><td>Sub Item 2.3</td><td> </td></tr>
       <tr><td>Sub Item 1.4</td><td> </td><td> </td></tr>
    </tbody>
</table>

为了获得该表，我试图将所有li元素放入数组'menuElements'中。然后我尝试在for循环中首先添加表头单元格。

var menuElements = [];
$("ul#menu_ li").each(function() { menuElements.push($(this))});

我想在将所有列表项放入数组'menuElements'后创建一个表。 menuElements[i].innerHtml返回undefined。

所以我被困在这里。

下一步是将子项添加到相应的主项目列。

$("#new_menu").html("<table class='table'><thead><tr>");    

//starting from 1 because I do not want to show Homepage link.
for (i = 1; i < menuElements.length; i++)
{
    //if current menu item has 'dropdown' class then it is a first level item and it should be on table header.
    if(menuElements[i].hasClass("dropdown") === true)
    {
        $("#new_menu").append("<th>" + menuElements[i].innerHtml + "<th>");
    }
}

//end table header and begin table body         
$("#footer_menu").append("</tr></thead><tbody>");   


for (i = 1; i < menuElements.length; i++)
{
    //if current menu item has 'dropdown' class then it is a first level item and it should be on table header.
    if(menuElements[i].hasClass("dropdown") === false)
    {
        $("#new_menu").append("<td>" + menuElements[i].innerHtml + "<td>");
    }
}       


//end table     
$("#footer_menu").append("</tbody></table>");

我确信有一种更好更快的方法可以做到这一点，因为jQuery的口号是：少写，多做。因为这很痛苦。

Answer 1

以下内容可帮助您入门：

var rowCount = 0,
    lis = $('#menu').children('li'),
    colCount = lis.length,
    table = '<table><thead><tr>';

lis.each(function(index) {
    //don't do homepage
    if (index > 0) {
        var li = $(this);
        table += '<th>' + li.children('a').text() + '</th>';

        var childRows = li.find('li').length;
        if (rowCount < childRows) {
            rowCount = childRows; 
        }
    }
});

table += '</tr></thead>';
table += '<tbody>';

for (r = 0; r < rowCount; r++)
{
    table += '<tr>';

    // start column count at 1 because of homepage link
    for (c = 1; c < colCount; c++)
    {
        var text = lis.eq(c).find('ul a').eq(r).text();
        if (text == '') {
            text = '&nbsp;';
        }

        table += '<td>' + text + '</td>';
    }

    table += '</tr>';
}

table += '</tbody>';
table += '</table>';

$('body').append(table);

Example

Answer 2

这个怎么样...如果它作为包含ul＆amp;的字符串从数据库出来li标签，我会使用中间件将字符串修改为html表，然后再将其发送到前端。

如何使用jQuery从当前无序列表创建表？

2 个答案: