Javascript 将表中具有纵轴的td内容循环为特殊div格式

我有一个垂直轴的表格（每个表格的第一列）是这样的

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

标题Aa1…a10
标题Bb1…b10
标题Cc1…c10

我可以这样循环此表中的所有内容吗：

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

标题A:a1
标题B:b1
标题C:c1
标题A：A。。。
标题B:B。。。
标题C：C。。。
标题A:a10
标题B:b10
标题C:c10

请检查此项。这将对您有所帮助。

var title=[“标题A”、“标题B”、“标题C”]；
var alp=[“a”、“b”、“c”]；
var text=“”；
var i；
var j；
对于（j=0；j<10；j++）
{
对于（i=0；i<3；i++）
{
text+=标题[i]+'+alp[i]+'+j+“
”；
}
text+=“
”
}
document.getElementById（“demo”）.innerHTML=text；

---

请在代码中添加说明。仅仅代码是不够的。

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