我有一個從 CSV 轉換為 JavaScript 的 HTML 表。我想向第二列中的行添加超鏈接。請幫我

Question

這是 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>

我想將超鏈接添加到第二列中的行。 當您單擊超鏈接文本時，我希望 JavaScript 將鏈接復制到剪貼板。

我在Click on text to copy a link to the clipboard處找到了以下 JavaScript，但我不知道如何添加到上面的 JavaScript embed in HTML。

const copyToClipboard = str => {
  const el = document.createElement('textarea');
  el.value = str;
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
};

const url ='http://www.myurl.com/viewReport.php?id=';

document.getElementById('myItem').addEventListener('click', function(e){ 
  let myUrl =  url + e.target.dataset.page_id;
  copyToClipboard( myUrl );
  alert(myUrl + ' copied to clipboard!')
});

<div id="myItem" data-page_id="1510970">1510970</div>

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"

Answer 1

 <: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>

我有一個從 CSV 轉換為 JavaScript 的 HTML 表。我想向第二列中的行添加超鏈接。請幫我

問題描述

1 個解決方案

解決方案1
0 2023-01-24 17:56:03

我有一個從 CSV 轉換為 JavaScript 的 HTML 表。我想向第二列中的行添加超鏈接。 請幫我

問題描述

1 個解決方案

解決方案1 0 2023-01-24 17:56:03

我有一個從 CSV 轉換為 JavaScript 的 HTML 表。我想向第二列中的行添加超鏈接。請幫我

解決方案1
0 2023-01-24 17:56:03