我有一个使用JavaScript从CSV转换而来的HTML表格,我想在第2列的行中添加超链接,请帮助我

2fjabf4q 于 2023-01-28 发布在 Java

关注(0)|答案(1)|浏览(106)

下面是嵌入HTML的JavaScript：

<!DOCTYPE html>
<html>
  <head>
    <title>JS Read CSV</title>
    <style>
      * {
        font-family: Arial, Helvetica, sans-serif;
        box-sizing: border-box;
      }
      table {
        margin: 10px;
        margin-bottom: 10px;
      }
      table {
        border-collapse: collapse;
      }
      table tr:nth-child(odd) {
        background: #f2f2f2;
      }
      table td {
        border: 1px solid #ddd;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <!-- FILE PICKER -->
    <input type="file" accept=".csv" id="picker">

    <!-- DISPLAY CSV HERE -->
    <table id="table"></table>

    <script>
      // Create a function to copy the text to clipboard
      const copyToClipboard = str => {
        const el = document.createElement("textarea");
        el.value = str;
        document.body.appendChild(el);
        el.select();
        document.execCommand("copy");
        document.body.removeChild(el);
      };

      window.onload = () => {
        // FILE READER + HTML ELEMENTS
            var reader = new FileReader(),
                picker = document.getElementById("picker"),
                table = document.getElementById("table");

            // READ CSV ON FILE PICK
            picker.onchange = ()=> reader.readAsText(picker.files[0]);

            // READ THE CSV FILE & GENERATE HTML
            reader.onloadend = () => {
                // ENTIRE CSV FILE
                let csv = reader.result;

                //CLEAR HTML TABLE 
                table.innerHTML = "";

                // SPLIT INTO ROWS
                let rows = csv.split("\r\n");

                // LOOP THROUGH ROWS + SPLIT COLUMNS 
                for (let row of rows) {
                let cols = row.match(/(?:\"([^\"]*(?:\"\"[^\"]*)*)\")|([^\",]+)/g);
                if (cols != null) {
                    let tr = table.insertRow();
                    for (let col of cols) {
                    let td = tr.insertCell();
                    td.innerHTML = col.replace(/(^"|"$)/g, "");
                    }
                }
            }
        };
    };
    </script>
</body>

我想在第2列的行中添加超链接。当您单击超链接文本时，我想让JavaScript将链接复制到剪贴板。
我发现下面的JavaScript在Click on text to copy a link to the clipboard，但我不知道如何添加到上述JavaScript嵌入HTML.
x一个一个一个一个x一个一个二个x
CSV文件如下所示：

# No, Position, Duration, Comment
1,"00:02:09:120","00:00:03:000","Hello"
2,"00:10:45:559","00:00:03:000","Goodbye"

csv

来源：https://stackoverflow.com/questions/75223881/i-have-a-html-table-converted-from-csv-with-javascript-i-want-to-add-hyperlinks

1条答案

按热度按时间

db2dz4w81#

<!DOCTYPE html>
<html>

<head>
    <title>JS Read CSV</title>
    <style>
        * {
            font-family: Arial, Helvetica, sans-serif;
            box-sizing: border-box;
        }

        table {
            margin: 10px;
            margin-bottom: 10px;
        }

        table {
            border-collapse: collapse;
        }

        table tr:nth-child(odd) {
            background: #f2f2f2;
        }

        table td {
            border: 1px solid #ddd;
            padding: 10px;
        }
    </style>
</head>

<body>
    <!-- FILE PICKER -->
    <input type="file" accept=".csv" id="picker">

    <!-- DISPLAY CSV HERE -->
    <table id="table"></table>

    <script>
        // Create a function to copy the text to clipboard
        const copyToClipboard = str => {
            const el = document.createElement("textarea");
            el.value = str;
            document.body.appendChild(el);
            el.select();
            document.execCommand("copy");
            document.body.removeChild(el);
        };

        window.onload = () => {
            // FILE READER + HTML ELEMENTS
            var reader = new FileReader(),
                picker = document.getElementById("picker"),
                table = document.getElementById("table");

            // READ CSV ON FILE PICK
            picker.onchange = () => reader.readAsText(picker.files[0]);

            // READ THE CSV FILE & GENERATE HTML
            reader.onloadend = () => {
                // ENTIRE CSV FILE
                let csv = reader.result;

                //CLEAR HTML TABLE 
                table.innerHTML = "";

                // SPLIT INTO ROWS
                let rows = csv.split("\r\n");

                // LOOP THROUGH ROWS + SPLIT COLUMNS 
                for (let row of rows) {
                    let cols = row.match(/(?:\"([^\"]*(?:\"\"[^\"]*)*)\")|([^\",]+)/g);
                    if (cols != null) {
                        let tr = table.insertRow();
                        for (let col of cols) {
                            let td = tr.insertCell();
                            td.innerHTML = col.replace(/(^"|"$)/g, "");

                        }
                    }
                }
                // adding click event
                const elements = document.querySelectorAll("#table td:nth-child(2)");
                //Then, we loop through those elements
                for (let i = 1; i < elements.length; i++) {
                    elements[i].addEventListener("click", copyClipboard)
                }
            };
        };

        let copyClipboard = function copyClipboard() {
            // Get the text field
            let copyText = event.target.innerHTML;
            // Copy the text inside the text field
            navigator.clipboard.writeText(copyText);
            // Alert the copied text
            console.log("Copied the text: " + copyText);
        }
    </script>
</body>

</html>

赞(0）回复(0）举报 2023-01-28

我来回答

我有一个使用JavaScript从CSV转换而来的HTML表格,我想在第2列的行中添加超链接,请帮助我

1条答案

相关问题

热门标签

最新问答