Question

我正在使用HTML，Java和Javascript构建Web应用程序。是否可以使用我已插入到Javascript代码中的Bootstrap设置按钮和表格的样式？

我想到的是我需要从我的电脑上传一个CSV文件，一旦我选择它，我点击上传（我插入的一个按钮），其中一个表格将在相同的JSP页面。

之后，该表应该有两个额外的列，＆＃39;编辑＆＃39;和＆＃39;删除＆＃39;分别编辑和删除行。我已经添加了“编辑”按钮（请参阅下面的代码）。

之后，我想在表格底部生成一个“提交”按钮，将该表上传到我的数据库中。

这就是问题所在。

1）现在我的上传按钮有onclick =＆＃34;上传（）;＆＃34;所以当我点击“上传”按钮时，它会将我带到javascript函数。

    <div>

        <label for="fileUpload"></label>
        <input type="file" id="fileUpload"/>

        <button type="button" id="upload" class="btn btn-info" onclick="Upload();"
                }>Upload
        </button>
        <div id="dvCSV">
        </div>
    </div>

这是我的上传功能：

<script type="text/javascript">
    function Upload() {
        var table = null;
        var fileUpload = document.getElementById("fileUpload");
        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
        if (regex.test(fileUpload.value.toLowerCase())) {
            if (typeof (FileReader) != "undefined") {
                var reader = new FileReader();
                reader.onload = function (e) {
                    table = document.createElement("table");
                    var rows = e.target.result.split("\n");
                    for (var i = 0; i < rows.length; i++) {
                        var row = table.insertRow(-1);

                        var x = row.insertCell(0);
                        if (i == 0) {
                            x.innerHTML = "Edit?";
                        } else {
                            var btn = document.createElement("button");
                            btn.innerHTML = "Edit";
                            btn.className = "editbtn";
                            x.appendChild(btn);
                            btn.onclick = function () {
                                var currentTD = $(this).parents('tr').find('td');

                                if ($(this).html() == 'Edit') {
                                    $.each(currentTD, function () {
                                        $(this).prop('contenteditable', true)
                                    });
                                } else {
                                    $.each(currentTD, function () {
                                        $(this).prop('contenteditable', false)
                                    });
                                }
                                $(this).html($(this).html() == 'Edit' ? 'Save' : 'Edit')
                            }
                        }

                        var cells = rows[i].split(",");
                        for (var j = 0; j < cells.length; j++) {
                            var cell = row.insertCell(-1);
                            cell.innerHTML = cells[j];
                        }
                    }
                    var dvCSV = document.getElementById("dvCSV");
                    dvCSV.innerHTML = "";
                    dvCSV.appendChild(table);
                }
                reader.readAsText(fileUpload.files[0]);
                //print("THIS");

            } else {
                alert("This browser does not support HTML5.");
            }

            //this button is to appear AFTER the table has generated
             var button = document.createElement('button');
             var t = document.createTextNode("Submit");
             button.appendChild(t);
             button.onClick = Upload;
             document.body.appendChild(button);
             button.style = "float:right";


        } else {
            alert("Please upload a valid CSV file.");
        }

    }


</script>

我的问题是，有没有更好的方法来做我想做的事情？我不允许使用PHP。如果没有，有没有办法设置在我的javascript函数中创建的表格和按钮？

2）如何将此表插入数据库？我使用的是Tomcat和MySQL。

非常感谢任何帮助，谢谢！

使用bootstrap创建javascript按钮

0 个答案: