将表格中垂直轴的td内容循环为特殊的div格式

时间:2016-08-04 05:06:56

标签: javascript jquery html

我有一个垂直轴(每个第一列)的表格,就像那个

<table id="tbl-hn">
<tr>
    <td>Title A</td><td>a1</td><td>...</td><td>a10</td>
</tr>
<tr>
    <td>Title B</td><td>b1</td><td>...</td><td>b10</td>
</tr>
<tr>
    <td>Title C</td><td>c1</td><td>...</td><td>c10</td>
</tr>
</table>

我可以像这样循环此表中的所有内容:

<div class="content">
<div>
    <div>Title A:</div><div>a1</div>
    <div>Title B:</div><div>b1</div>
    <div>Title C:</div><div>c1</div>
</div>
<div>
    <div>Title A:</div><div>a...</div>
    <div>Title B:</div><div>b...</div>
    <div>Title C:</div><div>c...</div>
</div>
<div>
    <div>Title A:</div><div>a10</div>
    <div>Title B:</div><div>b10</div>
    <div>Title C:</div><div>c10</div>
</div>

2 个答案:

答案 0 :(得分:1)

        

    <p id="demo"></p>

    <script>
            var title = ["Title A", "Title B", "Title C"];

            var alp= ["a", "b", "c"];

            var text = "";

            var i;
            var j;

            for(j = 0; j < 10; j++)
            {
                    for (i = 0; i < 3; i++) 
                    {
                            text += title[i] + " " + alp[i] +""+ j + "<br>";
                    }
                    text+="<br>"
            }
            document.getElementById("demo").innerHTML = text;
    </script>

    </body>

答案 1 :(得分:0)

请检查Fiddle。这对你有帮助。