Javascript:修改函数以动态创建表

Javascript: modify function to create table dynamically

本文关键字：动态 创建 函数 修改 Javascript      更新时间：2023-09-26

我对JavaScript很陌生，想使用一个函数将表格插入到表单中。到目前为止，我有以下代码（工作 - 除了标题），但正在努力解决以下问题：

1）如何使用提示（弹出窗口）来询问所需的表，而不是像我一样使用输入字段？2）如何在此处包含宽度（以%为单位）？3）如何始终添加表头？

我希望这里有人可以帮助我理解这一点。

我的代码： 

<html>
<head>
<script type="text/javascript">
    function insertTable()
    {
        var num_rows = document.getElementById('rows').value;
        var num_cols = document.getElementById('cols').value;
        var theader = "<table id='table1'><thead></thead>";
        var tbody = "";
        for(var i = 0; i < num_rows; i++)
        {
            tbody += "<tr>";
            for(var j = 0; j < num_cols; j++)
            {
                tbody += "<td>";
                tbody += "?";
                tbody += "</td>"
            }
            tbody += "</tr><br />";
        }
        var tfooter = "</table>";
        document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
    }
</script>
<style>
    #table1
    {
        border:solid 1px;
        border-collapse:collapse;
        width:100%;
    }
    #table1 td
    {
        border:solid 1px;
        vertical-align:middle;
    }
</style>
</head>
<body>
    <form name="tableForm">
        <label>Rows: <input type="text" name="rows" id="rows"/></label><br />
        <label>Cols: <input type="text" name="cols" id="cols"/></label><br />
        <label>Width (%): <input type="text" name="width" id="width"/></label><br />
        <button type="button" onclick="insertTable()">Create Table</button>
        <div id="wrapper"></div>
    </form>
</body>
</html>

感谢您对此的任何帮助，蒂姆

我在代码中的 JS 和 CSS 中添加了一些更改。这将为您提供每列的标题，并且还会以%为单位设置表格的宽度

要在弹出窗口中显示表单，您可以使用任何 jquery 插件。最好的弹出窗口jq插件是jquery-lightbox-me

<html>
<head>
<script type="text/javascript">
function insertTable()
{
    var num_rows = document.getElementById('rows').value;
    var num_cols = document.getElementById('cols').value;
    var width = document.getElementById('width').value;
    var theader = "<table id='table1' width = ' "+ width +"% '>";
    var tbody = "";
    for(var j = 0; j < num_cols; j++)
    {
      theader += "<th>header col "+ (j+1) +" </th>";
    }
    for(var i = 0; i < num_rows; i++)
    {
        tbody += "<tr>";
        for(var j = 0; j < num_cols; j++)
        {
            tbody += "<td>";
            tbody += "?";
            tbody += "</td>"
        }
        tbody += "</tr><br />";
    }
    var tfooter = "</table>";
    document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
}
</script>
<style>
#table1
{
    border:solid 1px;
    border-collapse:collapse;
}
#table1 th
{
    border:solid 1px;
    border-collapse:collapse;
}
#table1 td
{
    border:solid 1px;
    vertical-align:middle;
}
</style>
</head>
<body>
<form name="tableForm">
    <label>Rows: <input type="text" name="rows" id="rows"/></label><br />
    <label>Cols: <input type="text" name="cols" id="cols"/></label><br />
    <label>Width (%): <input type="text" name="width" id="width"/></label><br />
    <button type="button" onclick="insertTable()">Create Table</button>
    <div id="wrapper"></div>
</form>
</body>
</html>

希望这对你有帮助。

谢谢

假设我有一个CSV，它应该可以工作 

Header1,Header2,Header3
1,2,3
4,5,6

        var data = evt.target.result;
        var delimiter = ',';
        var escape = ''n';
        var rows = data.split(escape);
        var tbl = document.createElement('table');
        tbl.style.width = '100%';
        //tbl.setAttribute('border', '1', "green");
        tbl.className = "table table-hover table-condensed dataTable";
        var tbdy = document.createElement('tbody');

        for (index in rows) {
            var tr = document.createElement('tr'); // creating new row 
            var items = rows[index].split(delimiter);
            for (itemindex in items) {
                var td = "";
                if (index == 0) {
                    td = document.createElement('th');
                } else {
                    td = document.createElement('td');
                }
                td.appendChild(document.createTextNode(items[itemindex])); // creating new cell 
                tr.appendChild(td); // add to current tr
            }
            tbdy.appendChild(tr); // add new row (tr) to table 
        }
        tbl.appendChild(tbdy);
        document.getElementById('byte_content').appendChild(tbl);

看看 JQuery 和 show（）/hide（） 函数。您可以使用"真正的"javascript弹出窗口，但某些浏览器/浏览器配置不会打开新的选项卡/窗口。总结一下，考虑一下您的用例，创建所有必要的div 容器，并在您的页面上只显示一个div 容器。你可以在这里找到更多关于JQuery的信息，http://www.w3schools.com/jquery/jquery_hide_show.asp 当然还有这里。http://api.jquery.com/show/。您也可以使用 JQuery 函数更改表属性和相应的 css。

相关文章：