Question

我有一个包含三列[标题，类别，子类别]和多行的html表。我想阅读整个表格内容并将其归类为以下输出。

我的<html>表格内容是这样的。

Title   Category  Sub
T1         C1     S1
T2         C2     S2
T3         C2     S3
T3         C1     S1
T2         C1     S3
T1         C2     S3

这是我真正需要的输出格式。我只想以下面的输出格式打印上面的html表格内容。

T1 :
   C1 : S1
   C2 : S3
T2 :
   C2 : S2
   C1 : S3
T3 :
   C2 : S3
   C1 : S3



[Title]
     [Category] :[Sub-Category]

请帮帮我。

Answer 1

假设该表具有以下代码：

<table>
    <thead>
        <tr>
            <th>Title</th>
            <th>Category</th>
            <th>Sub</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>T1</th>
            <td>C1</td>
            <td>S1</td>
        </tr>
        <tr>
            <th>T2</th>
            <td>C2</td>
            <td>S2</td>
        </tr>
        <tr>
            <th>T3</th>
            <td>C2</td>
            <td>S3</td>
        </tr>
        <tr>
            <th>T3</th>
            <td>C1</td>
            <td>S1</td>
        </tr>
        <tr>
            <th>T2</th>
            <td>C1</td>
            <td>S3</td>
        </tr>
        <tr>
            <th>T1</th>
            <td>C2</td>
            <td>S3</td>
        </tr>
    </tbody>
</table>

我们可以使用jQuery来获得这样的输出：

$(document).ready(function(){
    $("table").hide();
    $("body").append("<textarea></textarea>");
    var s = "";
    $("tbody tr").each(function(){
        s += $(this).find("th").html() + ":\n";
        s += $(this).find("td:nth-child(2)").html() + ": " + $(this).find("td:nth-child(3)").html() + "\n\n";
    });
    $("textarea").val(s);
});

小提琴：http://jsfiddle.net/praveenscience/9ueervw4/

下面的代码，你得到一个关联的JavaScript对象！

$(document).ready(function(){
    $("table").hide();
    $("body").append("<textarea></textarea>");
    var s = {};
    $("tbody tr").each(function(){
        if (!s[$(this).find("th").html()])
            s[$(this).find("th").html()] = [];
        s[$(this).find("th").html()].push($(this).find("td:nth-child(2)").html() + ": " + $(this).find("td:nth-child(3)").html());
    });
});

Answer 2

以下示例将为您提供所需的输出。

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script language="javascript">
        $(document).ready(function () {
            var outputtemp = "<table>";
            $("#tbl1 tr").not("tr th").each(function () {
                outputtemp += "<tr>"
                var i = 0;
                $(this).find("td").each(function () {
                    if (i == 0)
                        outputtemp += "<td>" + $(this).text() + ":</td></tr><tr>";
                    else if (i == 1)
                        outputtemp += "<td></td><td>" + $(this).text() + ":</td>";
                    else
                        outputtemp += "<td>" + $(this).text() + "</td>";
                    i++;
                });
                outputtemp += "</tr>"
            });
            outputtemp += "</table>"
            $(".output").html(outputtemp);
        });
    </script>
</head>
<body>
    <table id="tbl1">
        <tr>
            <th>
                Title
            </th>
            <th>
                Category
            </th>
            <th>
                Sub
            </th>
        </tr>
        <tr>
            <td>
                T1
            </td>
            <td>
                C1
            </td>
            <td>
                S1
            </td>
        </tr>
        <tr>
            <td>
                T2
            </td>
            <td>
                C2
            </td>
            <td>
                S2
            </td>
        </tr>
        <tr>
            <td>
                T3
            </td>
            <td>
                C3
            </td>
            <td>
                S3
            </td>
        </tr>
    </table>
    <div class="output">
    </div>
</body>
</html>

Answer 3

尝试在javascript / jQuery中使用关联数组：DEMO

var tableRowArray = $('table tr');
var titleArray = [];
var mainArray = {};
// build an associative array of the values int he table
tableRowArray.each(function(){
    if($(this).children('th').length == 0) {
        var tempTitle = $(this).children('td').eq(0).text();
        if(mainArray[tempTitle]){
            mainArray[tempTitle][$(this).children('td').eq(1).text()] = $(this).children('td').eq(2).text();
        }
        else {
            titleArray.push(tempTitle);
            mainArray[tempTitle] = {};
            mainArray[tempTitle][$(this).children('td').eq(1).text()] = $(this).children('td').eq(2).text();
        }
    }
});
// print the formatted associative array to the page
$('body').append("<p></p>");
var formattedString = "";
$.each(titleArray, function(index, value){
    formattedString += "<b>" + value + " : </b><br/>";
    for(var key in mainArray[value]) {
        formattedString += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + key + " : " + mainArray[value][key] + "<br/>";
    }
});
$('p').html(formattedString);

基本上，我们从你的表中创建一个关联数组，然后下一个部分遍历数组以你指定的格式打印它（如果你的表结构与我的不同，你可能需要编辑数组的设置在JSfiddle中使用过。

Answer 4

使用getElementbyId获取数据，然后在js变量中包含完整数据时，可以对该数据应用任何操作。

如何阅读HTML并对表格内容进行排序？<table> </table>

4 个答案:

小提琴：http://jsfiddle.net/praveenscience/9ueervw4/