如何消除右侧的小额外列和 html 表底部的额外行

Question

I have a csv file that I load into an 11 column html table.我有一个 csv 文件，我将它加载到一个 11 列的 html 表中。 The data displays as expected except there is a very narrow column on the far right.除了最右侧有一个非常窄的列之外，数据按预期显示。 There is also an extra blank row at the bottom.底部还有一个额外的空白行。 I have made dozens of adjustments to the width percentages but the little column on the right prevails.我对宽度百分比进行了数十次调整，但右侧的小列占优势。 I haven't tried to eliminate the extra row on the bottom because I don't know what to try.我没有尝试消除底部的额外行，因为我不知道该尝试什么。 See CSS code.请参阅 CSS 代码。

<title>CSV to HTML5</title>
    <style type="text/css">
    table {
        width: 850px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid black;
        border-collapse: collapse;
    }

    th {
        text-align: center;
        padding: 6px;
        border: 1px solid black;
        border-collapse: collapse;
    }

    tr {
        height: 24px;
        border: 1px solid black;
    }

    tr:nth-child(even) {
        background-color: #00FFFF;
    }

    td {
        font-family: Arial, Verdana;
        font-size: 0.8em;
        font-weight: 700;
    }

    td {
        border: 1px solid black;
        cellpadding: 3px;
    }

    td:nth-child(1) {
        width: 4%;
        text-align: center;
    }

    td:nth-child(2) {
        width: 6%;
        text-align: left;
        padding-left: 5px;
    }

    td:nth-child(3) {
        width: 14%;
        text-align: left;
        padding-left: 5px;
    }

    td:nth-child(4) {
        width: 14%;
        text-align: left;
        padding-left: 5px;
    }

    td:nth-child(5) {
        width: 18%;
        text-align: left;
        padding-left: 5px;
    }

    td:nth-child(6) {
        width: 6%;
        padding-left: 5px;
    }

    td:nth-child(7) {
        width: 5%;
        text-align: center;
    }

    td:nth-child(8) {
        width:8%;
        text-align: center;
    }

    td:nth-child(9) {
        width: 8%;
        text-align: center;
    }

    td:nth-child(10) {
        width: 8%;
        text-align: center;
    }

    td:nth-child(11) {
        width:8%;
        text-align: center;

    </style>
</head>
<body>
    <div>
        <div>
            <legend>
                <h1 id="clubname" style="text-align:center"></h1>
                <h2 id="racename" style="text-align:center"></h2>
                <h3 id="racedate" style="text-align:center"></h3>
            </legend>
        </div>
        <div id="output">
        </div>
        <div id="myDiv" class="container">
            <hr>
            <form>
                <div class="form-group">
                    <input type="text" class="form-control" id="inp_clubname" placeholder="Club Name" size="24" required>
                    <input type="text" class="form-control" id="inp_racename" placeholder="Race Name" size="24" required>
                    <input type="date" class="form-control" id="inp_racedate" placeholder="Date Name" size="24" required>
                    <label for="csvFileInput">CSV File: </label>
                    <input type="file" id="csvFileInput" onchange=accept=".csv" size="35" required>
                    <input type="button" class="btn btn-primary" onclick="generate()" value="Generate" />
                </div>
            </form>
            <hr>
        </div>
    </div>

    <footer>
        <p style="text-align:center">©: Klexy Soft</p>
    </footer>
    <script type="text/javascript">
    function generate() {
        console.log('generate called')
        //copy text from form to headings
        ids = ["clubname", "racename", "racedate"]
        for (i in ids) {
            value = document.getElementById('inp_' + ids[i]).value
            document.getElementById(ids[i]).innerHTML = value
        }

        files = document.getElementById('csvFileInput').files
        // Check for the various File API support.
        if (window.FileReader) {
            // FileReader are supported.
            var reader = new FileReader();
            // Read file into memory as UTF-8
            reader.readAsText(files[0]);
            // Handle errors load
            reader.onload = loadHandler;
            reader.onerror = errorHandler;
        } else {
            alert('FileReader is not supported in this browser.');
        }
    }

    function loadHandler(event) {
        var csv = event.target.result;
        processData(csv);
    }

    function processData(csv) {
        var allTextLines = csv.split(/\r\n|\n/);
        var lines = [];
        for (var i = 0; i < allTextLines.length; i++) {
            var data = allTextLines[i].split(',');
            lines.push(data);
        }
        //console.log(lines);
        drawOutput(lines);
    }

    function errorHandler(evt) {
        if (evt.target.error.name == "NotReadableError") {
            alert("Canno't read file !");
        }
    }

    function drawOutput(lines) {
        //Clear previous data
        document.getElementById("output").innerHTML = "";
        var table = document.createElement("table");
        for (var i = 0; i < lines.length; i++) {
            var row = document.createElement("TR");
            table.appendChild(row)
            for (var j = 0; j < lines[i].length; j++) {
                // first row is header
                cell = document.createElement(i == 0 ? "TH" : "TD");
                row.appendChild(cell)
                cell.appendChild(document.createTextNode(lines[i][j]));
            }
        }
        document.getElementById("output").appendChild(table);
        document.getElementById("myDiv").style.visibility = "hidden";
    }
    console.log('initialized')
    </script>
</body>

csv file .csv 文件

PL,Sail#,Yacht,Type,Skipper,Club,Rtg,Finish,Elapsed,Cor'ted,  1st +,

1,1234,Boat Name,42MkII,Name,GYC,115,14:10:53,02:00:53,01:46:42,00:00:00, 2,1234,Boat Name,4000,Name,GYC,107,14:16:29,02:06:29,01:53:17,00:06:35, 3,1234,Boat Name,Catalina36MKII,Name,GYC,144,14:26:34,02:16:34,01:58:48,00:12:06, 4,1234,Boat Name,42,Name,GYC,131,14:26:37,02:16:37,02:00:28,00:13:46, 5,1234,Boat Name,Mark3,Name,GYC,218,14:52:01,02:42:01,02:15:08,00:28:26, 6,1234,Boat Name,Nonsuch 30C,Name,GYC,156,14:54:43,02:44:43,02:25:29,00:38:47, 7,1234,Boat Name,KP44,Name,GYC,168,15:25:50,03:15:50,02:55:07,01:08:25, 1,1234,Boat Name,42MkII,Name,GYC,115,14:10:53,02:00:53,01:46:42,00:00:00, 2,1234,Boat Name,4000,Name, GYC,107,14:16:29,02:06:29,01:53:17,00:06:35, 3,1234,Boat Name,Catalina36MKII,Name,GYC,144,14:26:34,02 :16:34,01:58:48,00:12:06, 4,1234,船名,42,Name,GYC,131,14:26:37,02:16:37,02:00:28, 00:13:46, 5,1234,Boat Name,Mark3,Name,GYC,218,14:52:01,02:42:01,02:15:08,00:28:26, 6,1234,Boat Name,Nonsuch 30C,Name,GYC,156,14:54:43,02:44:43,02:25:29,00:38:47, 7,1234,Boat Name,KP44,Name,GYC,168, 15:25:50,03:15:50,02:55:07,01:08:25,

Answer 1

One of the problems I was having was the java script, function drawOutput(lines) { and the codes that perform the function, generates the table and adds an extra blank row at the bottom, I guess waiting for another line of data.我遇到的一个问题是 java 脚本、函数 drawOutput(lines) { 和执行函数的代码，生成表格并在底部添加一个额外的空白行，我想等待另一行数据。 By adding one more line to the java script function code, the very last line, I was able to remove the extra empty row.通过在 java 脚本函数代码的最后一行中再添加一行，我能够删除多余的空行。

document.getElementById("output").appendChild(table).deleteRow(-1);

如何消除右侧的小额外列和 html 表底部的额外行

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-12-03 23:59:34

如何消除右侧的小额外列和 html 表底部的额外行

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-12-03 23:59:34

解决方案1
0 已采纳 2019-12-03 23:59:34