Question

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #container,#buttondiv{
            margin: 0 auto;
            width: 80%;
            overflow: auto;
        }
        table.gridtable {
            margin: 0 auto;
            width: 95%;
            overflow: auto;;
            font-family: helvetica, arial, sans-serial;
            font-size: 14px;
            color: #333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
            text-align: center;
        }
        table.gridtable th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #F6B4A5;
        }
        table.gridtable td{
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
        }
    </style>
</head>
<body>
    <p align="center"><input type="file" id="fileUpload" />
    <input type="button" id="upload" value="Upload" onclick="Upload()" /></p>
    <hr />
    <div id="dvCSV">
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script type="text/javascript">
    function Upload() {
        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) {
                    var table = document.createElement("table");
                    var rows = e.target.result.split("\n");
                    for (var i = 0; i < rows.length; i++) {
                        var cells = rows[i].split(",");
                        if (cells.length > 1) {
                            var row = table.insertRow(-1);
                            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]);
            } else {
                alert("This browser does not support HTML5.");
            }
        } else {
            alert("Please upload a valid CSV file.");
        }
    }
</script>
</body>
</html>

我是JavaScript的新手，在上面的代码中，我正在将CSV文件加载到HTML表中。但是我正在获取表头，因为它们是CSV文件。但是，我想在显示时个性化它们。例如，在CSV文件中，我有pr_id，我想在HTML表中将其显示为PR ID。另外，我想添加一个JavaScript代码，该代码将使用HTML Table创建分页，排序和过滤。

个性化表格标题，使用JavaScript使用HTML表格创建分页，排序和过滤

0 个答案: