保存用户点击 HTML table 行的顺序

Question

我想保存简单 HTML 页面的用户点击 table 行的顺序（并保存时间戳）。例如，拿这个 table

<table id="tableId">
<tr id="a">
    <td>a</td>
</tr>
<tr id="b">
    <td>b</td>
</tr>
<tr id="c">
    <td>c</td>
</tr>
</table>

假设用户先点击“a”行，然后点击“c”行，然后再次点击“a”行，然后点击“b”行。

我想将其保存为一个简单的 CSV 文件，如下所示：

"一个",7:29:32

"c",7:29:48

"一个",7:30:12

"b",7:30:28

我觉得最好是使用 JQuery 和 PhP，但我对这些还很陌生，所以任何帮助将不胜感激。

谢谢，巴拉兹

Answer 1

您可以在事件处理程序的帮助下完成此操作。这是一个让您入门的基本采样器。

在事件处理程序中，您捕获目标元素的 id 或任何其他可用信息。将 console.log(this) 或 console.log(e.target)（同义词）添加到您的代码中，以了解单击事件捕获了哪些数据。然后生成一个时间戳，并将信息添加到您的日志中。在这里我们只是转储每个事件的日志，您可能想做更多的事情。

// Log click events into an array
let clickLog = [];

// Element for dumping out the log
let loggerElement = document.querySelector('#log');

// Log dumper (adapt for your use case)
function iterateLog() {
    loggerElement.innerHTML = ''; 
    
    for(const clickData of clickLog) {
        loggerElement.insertAdjacentHTML('afterbegin', `${clickData[0]}: ${clickData[1]}\n`);
    }
}

// Let's select all <td> elements:
let tdList = document.querySelectorAll('td');

// And then attach click event handlers:
for(const td of tdList) {
    td.addEventListener('click', function(e) {
        // Logging: [ parentElement.id, timestamp ]
        clickLog.push([this.parentElement.id, new Date().valueOf()]);
        // And write it out right away, for purposes of this demo:
        iterateLog();
    });
}

<table>
<tr id="a"><td>alpha</td></tr>
<tr id="b"><td>beta</td></tr>
<tr id="g"><td>gamma</td></tr>
<tr id="d"><td>delta</td></tr>
</table>

<pre id="log"></pre>

不过，您无法直接从 Javascript 将其保存为 CSV 文件。要么将其与 AJAX 一起传递到服务器端 PHP 脚本进行保存——要么提供即时下载，然后自己保存。（如何实现这些选项中的任何一个都超出了这个 post。）

Answer 2

将小区 ID 和时间戳导出到 CSV 文件的一种可能方法是使用 Blob。 table row/cell 点击填充一个名为 store 的全局变量 - 数组中的顺序是它们被点击的顺序。当用户希望保存此数据时，单击 save 按钮生成 Blob，该 Blob 作为文件下载提供给用户 URL.createObjectURL 和 download 属性 link.

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title></title>
        <style>
            table{width:80%;}
            tr{cursor:pointer;width:100%;padding:0.5rem}
            tr:hover{background:pink}
            tr:active{background:yellow}
        </style>
    </head>
    <body>
        <table id="tableId">
          <tr id="a">
              <td>a</td>
          </tr>
          <tr id="b">
              <td>b</td>
          </tr>
          <tr id="c">
              <td>c</td>
          </tr>
        </table>

        <input type='button' value='Save' />
        
        
        <script>
        
            let store=[];
            let args={ hour:'2-digit', minute:'2-digit', second:'2-digit' };

            document.querySelectorAll('tr').forEach(tr=>tr.addEventListener('click',function(e){
                store.push([ 
                    JSON.stringify( this.id ),
                    JSON.stringify( new Date().toLocaleTimeString( 'en-GB', args ) ) 
                ]);
            }));


            document.querySelector('input[type="button"]').addEventListener('click',function(e){
                let blob=new Blob( [ store ], { type:'text/csv' } );
                let a=document.createElement('a');
                    a.download='export.csv';
                    a.href=URL.createObjectURL( blob );
                    a.click();
                  
                store=[];
            });
        </script>
    </body>
</html>

保存用户点击 HTML table 行的顺序

Saving the order in which user clicks on rows of a HTML table

html

php

jquery

html-table