Javascript 生成div的HTML内容，并使用JS表单填充值_Javascript_Html

Javascript 生成div的HTML内容，并使用JS表单填充值

javascript html

Javascript 生成div的HTML内容，并使用JS表单填充值,javascript,html,Javascript,Html,基本上我的问题是，我在网站上使用的是一种表格格式，手动将每个表格的数据复制并粘贴到HTML中是一件痛苦的事情因此，我想尝试稍微自动化一下，只需将数据复制粘贴到表单中，然后生成HTML，这样我就可以直接复制并粘贴到页面上我有表格和它生成的表格： <h1>Table Generator</h1>School Name: <form> <input id='school_name' type='text' value='School Name'&g

基本上我的问题是，我在网站上使用的是一种表格格式，手动将每个表格的数据复制并粘贴到HTML中是一件痛苦的事情

因此，我想尝试稍微自动化一下，只需将数据复制粘贴到表单中，然后生成HTML，这样我就可以直接复制并粘贴到页面上

我有表格和它生成的表格：

<h1>Table Generator</h1>School Name:
<form>
    <input id='school_name' type='text' value='School Name'><br>
    City: <input id='city' type='text' value='City'><br>
</form>
<hr>
<h3>2014-15 Data (Top Left Column)</h3>Tuition:
<form>
    <input id='tuition1' type='text' value='Tuition'><br>
    Room & Board: <input id='room1' type='text' value='Room & Board'><br>
    Books: <input id='books1' type='text' value='Books'><br>
    Other Expenses: <input id='other_expenses1' type='text' value='Other Expenses'><br>
    Total: <input id='total1' type='text' value='Total'><br>
</form>
<hr>
<strong>2014-15 Income Brackets Net Cost (Bottom Left Column)</strong><br>
<br>
0-30k:
<form>
    <input id='income_bracket_30k_1' type='text' value='$00,000'><br>
    30,001-48k: <input id='income_bracket_48k_1' type='text' value='$00,000'><br>
    48k-75k: <input id='income_bracket_75k_1' type='text' value='$00,000'><br>
    75k-110k: <input id='income_bracket_110k_1' type='text' value='$00,000'><br>
    110k+: <input id='income_bracket_110k+_1' type='text' value='$00,000'><br>
</form>
<hr>
<h3>2016-17 Data (Top Right Column)</h3>Tuition:
<form>
    <input id='tuition2' type='text' value='Tuition'><br>
    Room & Board: <input id='room2' type='text' value='Room & Board'><br>
    Books: <input id='books2' type='text' value='Books'><br>
    Other Expenses: <input id='other_expenses2' type='text' value='Other Expenses'><br>
    Total: <input id='total2' type='text' value='Total'><br>
</form>
<hr>
<strong>2016-17 Income Brackets Net Cost (Bottom Right Column)</strong><br>
<br>
0-30k:
<form>
    <input id='income_bracket_30k_2' type='text' value='$00,000'><br>
    30,001-48k: <input id='income_bracket_48k_2' type='text' value='$00,000'><br>
    48k-75k: <input id='income_bracket_75k_2' type='text' value='$00,000'><br>
    75k-110k: <input id='income_bracket_110k_2' type='text' value='$00,000'><br>
    110k+: <input id='income_bracket_110k+_2' type='text' value='$00,000'><br>
    <input onclick='generateTable()' type='button' value='Generate Table'><br>
</form>
<hr>
<br>


<!-- Actual Table -->


<div id="new_table">
    <ul class="xaccordion">
        <li>
            <h4><span id='school_output'></span></h4>
            <div class="xaccordion-content">
                <div class="netprice-table-wrap">
                    <table class="netprice-table">
                        <tbody>
                            <tr>
                                <th class="state-city" colspan="3">City: <span id='city_output'></span></th>
                            </tr>
                            <tr>
                                <th>Year</th>
                                <th>2014-15</th>
                                <th>2016-17</th>
                            </tr>
                            <tr>
                                <td>Tuition and Fees</td>
                                <td><span id='tuition1_output'></span></td>
                                <td><span id='tuition2_output'></span></td>
                            </tr>
                            <tr>
                                <td>Room and Board</td>
                                <td><span id='room1_output'></span></td>
                                <td><span id='room2_output'></span></td>
                            </tr>
                            <tr>
                                <td>Books</td>
                                <td><span id='books1_output'></span></td>
                                <td><span id='books2_output'></span></td>
                            </tr>
                            <tr>
                                <td>Other Expenses</td>
                                <td><span id='other_expenses1_output'></span></td>
                                <td><span id='other_expenses2_output'></span></td>
                            </tr>
                            <tr>
                                <td>Total</td>
                                <td><span id='total1_output'></span></td>
                                <td><span id='total2_output'></span></td>
                            </tr>
                            <tr>
                                <th></th>
                                <th>Net Cost (Actual)<br>
                                2014-15</th>
                                <th>Net Cost (Estimated)<br>
                                2016-17</th>
                            </tr>
                            <tr>
                                <td>$0-$30k</td>
                                <td><span id='income_bracket_30k_1_output'></span></td>
                                <td><span id='income_bracket_30k_2_output'></span></td>
                            </tr>
                            <tr>
                                <td>$30,001 - $48k</td>
                                <td><span id='income_bracket_48k_1_output'></span></td>
                                <td><span id='income_bracket_48k_2_output'></span></td>
                            </tr>
                            <tr>
                                <td>$48,001 - $75k</td>
                                <td><span id='income_bracket_75k_1_output'></span></td>
                                <td><span id='income_bracket_75k_2_output'></span></td>
                            </tr>
                            <tr>
                                <td>$75,001 - $110k</td>
                                <td><span id='income_bracket_110k_1_output'></span></td>
                                <td><span id='income_bracket_110k_2_output'></span></td>
                            </tr>
                            <tr>
                                <td>$110,001+</td>
                                <td><span id='income_bracket_110k+_1_output'></span></td>
                                <td><span id='income_bracket_110k+_2_output'></span></td>
                            </tr>
                        </tbody>
                    </table><!--/.netprice-table-->
                </div><!--/.netprice-table-wrap-->
            </div><!--/.xaccordion-content-->
        </li>
    </ul>
</div><!--/.new_table-->

这一切相对来说都很好，尽管看起来非常邋遢。然而，我的问题是：我不知道如何使用新填充的数据提取表的HTML？这是密码笔：

你需要这样的东西吗？保存数据的结构？JSON

var mySt=[
{id:1，标题：“书”}，
{id:2，标题：“房间”}，
{id:3，标题：“公园”}，
{id:4，标题：“马达”}，
{id:5，标题：“银行”}
];
for（mySt中的变量i）{
var tr=$（''+mySt[i].title+'sp 1 sp 2'）；
$（“#我的表格”）。追加（tr）；
}

我可能没有想到一种更好的方法，但是您可以将

的整个框架复制到

Javascript

中的

字符串中，然后将变量连接到值所在的字符串中，如：
var tableString = "<table><tbody>
                            <tr>
                                <th class='state-city' colspan='3'>City: <span id='city_output'>"+ cityVariable +"</span></th>
                            </tr>
                            <tr>
                                <th>Year</th>
                                <th>2014-15</th>
                                <th>2016-17</th>
                            </tr>
                            <tr>
                                <td>Tuition and Fees</td>
                                <td><span id='tuition1_output'>"+ tuitionVariable1 +"</span></td>
                                <td><span id='tuition2_output'>"+ tuitionVariable2 +"</span></td>
                            </tr>
                            <tr>
                                <td>Room and Board</td>
                                <td><span id='room1_output'>"+ roomVariable1 +"</span></td>
                                <td><span id='room2_output'></span></td>
                            </tr>
                            <tr>
                                <td>Books</td>
                                <td><span id='books1_output'></span></td>
                                <td><span id='books2_output'></span></td>
                            </tr>
                            <tr>
                                <td>Other Expenses</td>
                                <td><span id='other_expenses1_output'></span></td>
                                <td><span id='other_expenses2_output'></span></td>
                            </tr>
                            <tr>
                                <td>Total</td>
                                <td><span id='total1_output'></span></td>
                                <td><span id='total2_output'></span></td>
                            </tr>
                            <tr>
                                <th></th>
                                <th>Net Cost (Actual)<br>
                                2014-15</th>
                                <th>Net Cost (Estimated)<br>
                                2016-17</th>
                            </tr>
                            <tr>
                                <td>$0-$30k</td>
                                <td><span id='income_bracket_30k_1_output'></span></td>
                                <td><span id='income_bracket_30k_2_output'></span></td>
                            </tr>
                            <tr>
                                <td>$30,001 - $48k</td>
                                <td><span id='income_bracket_48k_1_output'></span></td>
                                <td><span id='income_bracket_48k_2_output'></span></td>
                            </tr>
                            <tr>
                                <td>$48,001 - $75k</td>
                                <td><span id='income_bracket_75k_1_output'></span></td>
                                <td><span id='income_bracket_75k_2_output'></span></td>
                            </tr>
                            <tr>
                                <td>$75,001 - $110k</td>
                                <td><span id='income_bracket_110k_1_output'></span></td>
                                <td><span id='income_bracket_110k_2_output'></span></td>
                            </tr>
                            <tr>
                                <td>$110,001+</td>
                                <td><span id='income_bracket_110k+_1_output'></span></td>
                                <td><span id='income_bracket_110k+_2_output'></span></td>
                            </tr></tbody></table>";

编辑：
我看到您想要在屏幕上生成HTML
，以便复制和粘贴它
您可以在页面上创建一个
，然后在

这是一个更新的JS文件，所有内容都包含在一个函数中。因为您试图在函数之外使用变量，但是通过usinfvar
您将变量的范围限定为仅在函数中使用
还要更改其余的变量名。我将第一个更改为city\u输出

function generateTable() {
    // City and School
    var school_output = document.getElementById('school_name').value;
    document.getElementById('school_output').innerHTML = school_output;
    var city_output = document.getElementById('city').value;
    document.getElementById('city_output').innerHTML = city_output;
    // Costs 1
    var formInput = document.getElementById('tuition1').value;
    document.getElementById('tuition1_output').innerHTML = formInput;
    var formInput = document.getElementById('room1').value;
    document.getElementById('room1_output').innerHTML = formInput;
    var formInput = document.getElementById('books1').value;
    document.getElementById('books1_output').innerHTML = formInput;
    var formInput = document.getElementById('other_expenses1').value;
    document.getElementById('other_expenses1_output').innerHTML = formInput;
    var formInput = document.getElementById('total1').value;
    document.getElementById('total1_output').innerHTML = formInput;
    var formInput = document.getElementById('other_expenses1').value;
    document.getElementById('other_expenses1_output').innerHTML = formInput;
    // Costs 2
    var formInput = document.getElementById('tuition2').value;
    document.getElementById('tuition2_output').innerHTML = formInput;
    var formInput = document.getElementById('room2').value;
    document.getElementById('room2_output').innerHTML = formInput;
    var formInput = document.getElementById('books2').value;
    document.getElementById('books2_output').innerHTML = formInput;
    var formInput = document.getElementById('other_expenses2').value;
    document.getElementById('other_expenses2_output').innerHTML = formInput;
    var formInput = document.getElementById('total2').value;
    document.getElementById('total2_output').innerHTML = formInput;
    var formInput = document.getElementById('other_expenses2').value;
    document.getElementById('other_expenses2_output').innerHTML = formInput;
    // Income Brackets 1
    var formInput = document.getElementById('income_bracket_30k_1').value;
    document.getElementById('income_bracket_30k_1_output').innerHTML = formInput;
    var formInput = document.getElementById('income_bracket_48k_1').value;
    document.getElementById('income_bracket_48k_1_output').innerHTML = formInput;
    var formInput = document.getElementById('income_bracket_75k_1').value;
    document.getElementById('income_bracket_75k_1_output').innerHTML = formInput;
    var formInput = document.getElementById('income_bracket_110k_1').value;
    document.getElementById('income_bracket_110k_1_output').innerHTML = formInput;
    var formInput = document.getElementById('income_bracket_110k_plus_1').value;
    document.getElementById('income_bracket_110k_plus_1_output').innerHTML = formInput;
    // Income Brackets 2 
    var formInput = document.getElementById('income_bracket_30k_2').value;
    document.getElementById('income_bracket_30k_2_output').innerHTML = formInput;
    var formInput = document.getElementById('income_bracket_48k_2').value;
    document.getElementById('income_bracket_48k_2_output').innerHTML = formInput;
    var formInput = document.getElementById('income_bracket_75k_2').value;
    document.getElementById('income_bracket_75k_2_output').innerHTML = formInput;
    var formInput = document.getElementById('income_bracket_110k_2').value;
    document.getElementById('income_bracket_110k_2_output').innerHTML = formInput;
    var formInput = document.getElementById('income_bracket_110k_plus_2').value;
    document.getElementById('income_bracket_110k_plus_2_output').innerHTML = formInput;

  var tableString = "<table><tbody><tr><th class='state-city' colspan='3'>City: <span id='city_output'>" + city_output + "</span></th></tr><tr><th>Year</th><th>2014-15</th><th>2016-17</th></tr><tr><td>Tuition and Fees</td><td><span id='tuition1_output'>" + tuition1_output + "</span></td><td><span id='tuition2_output'>" + tuition2_output + "</span></td></tr><tr><td>Room and Board</td><td><span id='room1_output'>" + room1_output + "</span></td><td><span id='room2_output'>"+ room2_output +"</span></td></tr><tr><td>Books</td><td><span id='books1_output'>" + books1_output + "</span></td><td><span id='books2_output'>"+ books2_output +"</span></td></tr><tr><td>Other Expenses</td><td><span id='other_expenses1_output'>"+ other_expenses1_output +"</span></td><td><span id='other_expenses2_output'>" + other_expenses2_output + "</span></td></tr><tr><td>Total</td><td><span id='total1_output'>" + total1_output + "</span></td><td><span id='total2_output'>" + total2_output + "</span></td></tr><tr><th></th><th>Net Cost (Actual)<br>2014-15</th><th>Net Cost (Estimated)<br>2016-17</th></tr><tr><td>$0-$30k</td><td><span id='income_bracket_30k_1_output'>" + income_bracket_30k_1_output + "</span></td><td><span id='income_bracket_30k_2_output'>" + income_bracket_30k_2_output + "</span></td></tr><tr><td>$30,001 - $48k</td><td><span id='income_bracket_48k_1_output'>" + income_bracket_48k_1_output + "</span></td><td><span id='income_bracket_48k_2_output'>" + income_bracket_48k_2_output + "</span></td></tr><tr><td>$48,001 - $75k</td><td><span id='income_bracket_75k_1_output'>" + income_bracket_75k_1_output + "</span></td><td><span id='income_bracket_75k_2_output'>" + income_bracket_75k_2_output + "</span></td></tr><tr><td>$75,001 - $110k</td><td><span id='income_bracket_110k_1_output'>"+ income_bracket_110k_1_output +"</span></td><td><span id='income_bracket_110k_2_output'>" + income_bracket_110k_2_output + "</span></td></tr><tr><td>$110,001+</td><td><span id='income_bracket_110k_plus_1_output'>" + income_bracket_110k_plus_1_output + "</span></td><td><span id='income_bracket_110k_pkus_2_output'>" + income_bracket_110k_plus_2_output + "</span></td></tr></tbody></table>";

var textarea = document.getElementById('my-textarea');
textarea.value = tableString;
}
generateTable();

函数generateTable（）{
//城市与学校
var school\u output=document.getElementById（'school\u name'）。值；
document.getElementById（'school\u output'）。innerHTML=school\u output；
var city_output=document.getElementById（'city'）。值；
document.getElementById（'city\u output'）。innerHTML=city\u output；
//费用1
var formInput=document.getElementById（'tution1'）。值；
document.getElementById（'tution1_output'）。innerHTML=formInput；
var formInput=document.getElementById（'room1'）。值；
document.getElementById（'room1_output'）。innerHTML=formInput；
var formInput=document.getElementById（'books1'）。值；
document.getElementById（'books1_output'）。innerHTML=formInput；
var formInput=document.getElementById（“其他支出1”）。值；
document.getElementById（'other_expense1_output'）。innerHTML=formInput；
var formInput=document.getElementById（'total1'）。值；
document.getElementById（'total1_output'）。innerHTML=formInput；
var formInput=document.getElementById（“其他支出1”）。值；
document.getElementById（'other_expense1_output'）。innerHTML=formInput；
//费用2
var formInput=document.getElementById（'tution2'）。值；
document.getElementById（'tution2_output'）。innerHTML=formInput；
var formInput=document.getElementById（'room2'）。值；
document.getElementById（'room2_output'）。innerHTML=formInput；
var formInput=document.getElementById（'books2'）。值；
document.getElementById（'books2_output'）。innerHTML=formInput；
var formInput=document.getElementById（'other_Expense2'）。值；
document.getElementById（'other_expenses2_output'）。innerHTML=formInput；
var formInput=document.getElementById（'total2'）。值；
document.getElementById（'total2_output'）。innerHTML=formInput；
var formInput=document.getElementById（'other_Expense2'）。值；
document.getElementById（'other_expenses2_output'）。innerHTML=formInput；
//收入等级1
var formInput=document.getElementById（'income_括弧_30k_1'）。值；
document.getElementById（'income_bracket_30k_1_output'）。innerHTML=formInput；
var formInput=document.getElementById（'income_括号内的'u 48k_1'）。值；
document.getElementById（'income_bracket_48k_1_output'）。innerHTML=formInput；
var formInput=document.getElementById（'income_括号中的'u 75k_1'）。值；
document.getElementById（'income_bracket_75k_1_output'）。innerHTML=formInput；
var formInput=document.getElementById（'income_括号内为110k_1'）。值；
document.getElementById（'income_bracket_110k_1_output'）。innerHTML=formInput；
var formInput=document.getElementById（'income_括号内加上_1'）。值；
document.getElementById（'income_bracket_110k_加上_1_output'）。innerHTML=formInput；
//收入等级2
var formInput=document.getElementById（'income_括弧_30k_2'）。值；
document.getElementById（'income_bracket_30k_2_output'）。innerHTML=formInput；
var formInput=document.getElementById（'income_括弧_48k_2'）。值；
document.getElementById（'income_bracket_48k_2_output'）。innerHTML=formInput；
var formInput=document.getElementById（'income_括号内为75k_2'）。值；
document.getElementById（'income_bracket_75k_2_output'）。innerHTML=formInput；
var formInput=document.getElementById（'income_括弧_110k_2'）。值；
document.getElementById（'income_bracket_110k_2_output'）。innerHTML=formInput；
var formInput=document.getElementById（'income_括号内加上_2'）。值；
document.getElementById（“收入加上2个输出”）.innerHTML=formInput；
var TABLETSTRING=“城市：”+城市产出+”2014-152016-17学年学费和费用“+学费1产出+”+学费2产出+”食宿“+房间1产出+”+“+房间2产出+”书籍“+书籍1产出+”+书籍2产出+”其他支出1产出+“+其他支出2产出+”总产出+“+总产出+”净成本（实际）
2014-15净成本（预计）
2016-17 0-3万美元+收入级3万美元+产出+收入级3万美元+产出+收入级3万美元+产出+收入级3万美元
var table = document.getElementsByClassName('netprice-table');
table.innerHTML = tableString;

var textarea = document.getElementById('my-textarea');
textarea.value = tableString;

function generateTable() {
    // City and School
    var school_output = document.getElementById('school_name').value;
    document.getElementById('school_output').innerHTML = school_output;
    var city_output = document.getElementById('city').value;
    document.getElementById('city_output').innerHTML = city_output;
    // Costs 1
    var formInput = document.getElementById('tuition1').value;
    document.getElementById('tuition1_output').innerHTML = formInput;
    var formInput = document.getElementById('room1').value;
    document.getElementById('room1_output').innerHTML = formInput;
    var formInput = document.getElementById('books1').value;
    document.getElementById('books1_output').innerHTML = formInput;
    var formInput = document.getElementById('other_expenses1').value;
    document.getElementById('other_expenses1_output').innerHTML = formInput;
    var formInput = document.getElementById('total1').value;
    document.getElementById('total1_output').innerHTML = formInput;
    var formInput = document.getElementById('other_expenses1').value;
    document.getElementById('other_expenses1_output').innerHTML = formInput;
    // Costs 2
    var formInput = document.getElementById('tuition2').value;
    document.getElementById('tuition2_output').innerHTML = formInput;
    var formInput = document.getElementById('room2').value;
    document.getElementById('room2_output').innerHTML = formInput;
    var formInput = document.getElementById('books2').value;
    document.getElementById('books2_output').innerHTML = formInput;
    var formInput = document.getElementById('other_expenses2').value;
    document.getElementById('other_expenses2_output').innerHTML = formInput;
    var formInput = document.getElementById('total2').value;
    document.getElementById('total2_output').innerHTML = formInput;
    var formInput = document.getElementById('other_expenses2').value;
    document.getElementById('other_expenses2_output').innerHTML = formInput;
    // Income Brackets 1
    var formInput = document.getElementById('income_bracket_30k_1').value;
    document.getElementById('income_bracket_30k_1_output').innerHTML = formInput;
    var formInput = document.getElementById('income_bracket_48k_1').value;
    document.getElementById('income_bracket_48k_1_output').innerHTML = formInput;
    var formInput = document.getElementById('income_bracket_75k_1').value;
    document.getElementById('income_bracket_75k_1_output').innerHTML = formInput;
    var formInput = document.getElementById('income_bracket_110k_1').value;
    document.getElementById('income_bracket_110k_1_output').innerHTML = formInput;
    var formInput = document.getElementById('income_bracket_110k_plus_1').value;
    document.getElementById('income_bracket_110k_plus_1_output').innerHTML = formInput;
    // Income Brackets 2 
    var formInput = document.getElementById('income_bracket_30k_2').value;
    document.getElementById('income_bracket_30k_2_output').innerHTML = formInput;
    var formInput = document.getElementById('income_bracket_48k_2').value;
    document.getElementById('income_bracket_48k_2_output').innerHTML = formInput;
    var formInput = document.getElementById('income_bracket_75k_2').value;
    document.getElementById('income_bracket_75k_2_output').innerHTML = formInput;
    var formInput = document.getElementById('income_bracket_110k_2').value;
    document.getElementById('income_bracket_110k_2_output').innerHTML = formInput;
    var formInput = document.getElementById('income_bracket_110k_plus_2').value;
    document.getElementById('income_bracket_110k_plus_2_output').innerHTML = formInput;

  var tableString = "<table><tbody><tr><th class='state-city' colspan='3'>City: <span id='city_output'>" + city_output + "</span></th></tr><tr><th>Year</th><th>2014-15</th><th>2016-17</th></tr><tr><td>Tuition and Fees</td><td><span id='tuition1_output'>" + tuition1_output + "</span></td><td><span id='tuition2_output'>" + tuition2_output + "</span></td></tr><tr><td>Room and Board</td><td><span id='room1_output'>" + room1_output + "</span></td><td><span id='room2_output'>"+ room2_output +"</span></td></tr><tr><td>Books</td><td><span id='books1_output'>" + books1_output + "</span></td><td><span id='books2_output'>"+ books2_output +"</span></td></tr><tr><td>Other Expenses</td><td><span id='other_expenses1_output'>"+ other_expenses1_output +"</span></td><td><span id='other_expenses2_output'>" + other_expenses2_output + "</span></td></tr><tr><td>Total</td><td><span id='total1_output'>" + total1_output + "</span></td><td><span id='total2_output'>" + total2_output + "</span></td></tr><tr><th></th><th>Net Cost (Actual)<br>2014-15</th><th>Net Cost (Estimated)<br>2016-17</th></tr><tr><td>$0-$30k</td><td><span id='income_bracket_30k_1_output'>" + income_bracket_30k_1_output + "</span></td><td><span id='income_bracket_30k_2_output'>" + income_bracket_30k_2_output + "</span></td></tr><tr><td>$30,001 - $48k</td><td><span id='income_bracket_48k_1_output'>" + income_bracket_48k_1_output + "</span></td><td><span id='income_bracket_48k_2_output'>" + income_bracket_48k_2_output + "</span></td></tr><tr><td>$48,001 - $75k</td><td><span id='income_bracket_75k_1_output'>" + income_bracket_75k_1_output + "</span></td><td><span id='income_bracket_75k_2_output'>" + income_bracket_75k_2_output + "</span></td></tr><tr><td>$75,001 - $110k</td><td><span id='income_bracket_110k_1_output'>"+ income_bracket_110k_1_output +"</span></td><td><span id='income_bracket_110k_2_output'>" + income_bracket_110k_2_output + "</span></td></tr><tr><td>$110,001+</td><td><span id='income_bracket_110k_plus_1_output'>" + income_bracket_110k_plus_1_output + "</span></td><td><span id='income_bracket_110k_pkus_2_output'>" + income_bracket_110k_plus_2_output + "</span></td></tr></tbody></table>";

var textarea = document.getElementById('my-textarea');
textarea.value = tableString;
}
generateTable();