0

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

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

4

3 回答 3

2

我在您的代码中对 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>

希望这会对你有所帮助。

谢谢

于 2013-10-27T11:43:51.300 回答
1

假设我有一个 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);
于 2014-02-20T09:21:46.870 回答
0

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

于 2013-10-27T11:04:09.977 回答