JavaScriptでCSVから表を作成する方法を知りたい

input表作成html
1<form id="frm" name="frm" method="GET" action="">
2    <div>新しい行を追加：<input type="button" id="add" name="add" value="追加" onclick="appendRow()"></div>
3    <table border="1" id="tbl">
4    <tr>
5        <th style="text-align:right; width:40px;">番号</th>
6        <th style="">入力文字</th>
7        <th style="background-color: green; width:40px;"> </th>
8        <th style="background-color: red; width:40px;"> </th>
9    </tr>
10    <tr>
11        <td style="text-align:right; width:40px;"><span class="seqno">1</span></td>
12        <td style=""><input class="inpval" type="text" id="txt1" name="txt1" value="blah blah blah" size="30" readonly style="border:none"></td>
13        <td style="background-color: green; width:40px;"><input class="edtbtn" type="button" id="edtBtn1" value="編集" onclick="editRow(this)"></td>
14        <td style="background-color: red; width:40px;"><input class="delbtn" type="button" id="delBtn1" value="削除" onclick="deleteRow(this)"></td>
15    </tr>
16    </table>
17    <input type="submit" value="送信">
18</form>

input表作成javaScript
1/*
2 * appendRow: テーブルに行を追加
3 */
4function appendRow()
5{
6    var objTBL = document.getElementById("tbl");
7    if (!objTBL)
8        return;
9    
10    var count = objTBL.rows.length;
11    
12    // 最終行に新しい行を追加
13    var row = objTBL.insertRow(count);
14
15    // 列の追加
16    var c1 = row.insertCell(0);
17    var c2 = row.insertCell(1);
18    var c3 = row.insertCell(2);
19    var c4 = row.insertCell(3);
20
21    // 各列にスタイルを設定
22    c1.style.cssText = "text-align:right; width:40px;";
23    c2.style.cssText = "";
24    c3.style.cssText = "background-color: green; width:40px;";
25    c4.style.cssText = "background-color: red; width:40px;";
26    
27    // 各列に表示内容を設定
28    c1.innerHTML = '<span class="seqno">' + count + '</span>';
29    c2.innerHTML = '<input class="inpval" type="text"   id="txt' + count + '" name="txt' + count + '" value="" size="30" style="border:1px solid #888;">';
30    c3.innerHTML = '<input class="edtbtn" type="button" id="edtBtn' + count + '" value="確定" onclick="editRow(this)">';
31    c4.innerHTML = '<input class="delbtn" type="button" id="delBtn' + count + '" value="削除" onclick="deleteRow(this)">';
32    
33    // 追加した行の入力フィールドへフォーカスを設定
34    var objInp = document.getElementById("txt" + count);
35    if (objInp)
36        objInp.focus();
37}
38
39/*
40 * deleteRow: 削除ボタン該当行を削除
41 */
42function deleteRow(obj)
43{
44    // 確認
45    if (!confirm("この行を削除しますか？"))
46        return;
47
48    if (!obj)
49        return;
50
51    var objTR = obj.parentNode.parentNode;
52    var objTBL = objTR.parentNode;
53    
54    if (objTBL)
55        objTBL.deleteRow(objTR.sectionRowIndex);
56    
57    // <span> 行番号ふり直し
58    var tagElements = document.getElementsByTagName("span");
59    if (!tagElements)
60        return false;
61
62    var seq = 1;
63    for (var i = 0; i < tagElements.length; i++)
64    {
65        if (tagElements[i].className.match("seqno"))
66            tagElements[i].innerHTML = seq++;
67    }
68
69    // id/name ふり直し
70    var tagElements = document.getElementsByTagName("input");
71    if (!tagElements)
72        return false;
73
74    // <input type="text" id="txtN">
75    var seq = 1;
76    for (var i = 0; i < tagElements.length; i++)
77    {
78        if (tagElements[i].className.match("inpval"))
79        {
80            tagElements[i].setAttribute("id", "txt" + seq);
81            tagElements[i].setAttribute("name", "txt" + seq);
82            ++seq;
83        }
84    }
85
86    // <input type="button" id="edtBtnN">
87    seq = 1;
88    for (var i = 0; i < tagElements.length; i++)
89    {
90        if (tagElements[i].className.match("edtbtn"))
91        {
92            tagElements[i].setAttribute("id", "edtBtn" + seq);
93            ++seq;
94        }
95    }
96
97    // <input type="button" id="delBtnN">
98    seq = 1;
99    for (var i = 0; i < tagElements.length; i++)
100    {
101        if (tagElements[i].className.match("delbtn"))
102        {
103            tagElements[i].setAttribute("id", "delBtn" + seq);
104            ++seq;
105        }
106    }
107}
108
109/*
110 * editRow: 編集ボタン該当行の内容を入力・編集またモード切り替え
111 */
112function editRow(obj)
113{
114    var objTR = obj.parentNode.parentNode;
115    var rowId = objTR.sectionRowIndex;
116    var objInp = document.getElementById("txt" + rowId);
117    var objBtn = document.getElementById("edtBtn" + rowId);
118
119    if (!objInp || !objBtn)
120        return;
121    
122    // モードの切り替えはボタンの値で判定   
123    if (objBtn.value == "編集")
124    {
125        objInp.style.cssText = "border:1px solid #888;"
126        objInp.readOnly = false;
127        objInp.focus();
128        objBtn.value = "確定";
129    }
130    else
131    {
132        objInp.style.cssText = "border:none;"
133        objInp.readOnly = true;
134        objBtn.value = "編集";
135    }
136}
137