Question

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

感谢您对此提供任何帮助，Tim

Answer 1

我在代码中添加了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>

希望这会对你有所帮助。

由于

Answer 2

假设我有一个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);

Answer 3

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

Javascript：修改函数动态创建表

3 个答案: