保存用户点击 HTML 表格行的顺序 [关闭]答案

【问题标题】：Saving the order in which user clicks on rows of a HTML table [closed]保存用户点击 HTML 表格行的顺序 [关闭]
【发布时间】：2022-01-10 00:47:13
【问题描述】：

我想保存简单 HTML 页面的用户单击表格行的顺序（同时保存时间戳）。比如这张表

<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 文件，如下所示：

"a",7:29:32

"c",7:29:48

"a",7:30:12

"b",7:30:28

我觉得最好使用 JQuery 和 PhP，但我对这些很陌生，因此将不胜感激。

谢谢，巴拉兹

【问题讨论】：

没有提及您打算如何使用存储的数据。有多种保存方式，但实际保存的位置和方式取决于用例

标签： php html jquery html-table

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

在事件处理程序中，您捕获目标元素的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 脚本进行保存 - 或者提供即时下载，然后自行保存。（如何实现这些选项中的任何一个都超出了这篇文章的范围。）

【讨论】：

OP 询问的是点击的行的顺序，而不是单元格
@charlietfl 哦，是的，没错。可通过this.parentElement.id 获得。更新了匹配的答案，<tr> 具有id。认为它没有太大区别，因为问题中每行只有一个单元格。
如果事件侦听器本身就在行上，那么事件侦听器会少很多。假设每行只有一个单元格不适用于所有用例。请记住，您的答案不仅适用于当前的 OP，也适用于未来的其他人