【问题标题】:How can i create a "Select all" button for a table如何为表格创建“全选”按钮
【发布时间】:2019-02-26 12:27:58
【问题描述】:

我正在为网站创建表格。该网站在表格中返回其值。我需要从表 td 中复制所有值,并将它们粘贴到 excel 中。有没有办法制作一个“全选”按钮,这样我只需要按 ctrl+c 吗?而不是把我的鼠标一直拖到桌子下面。

我在这里使用的表格代码:

<!DOCTYPE html>
<html>
<head>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <h2>Select all test</h2>
    <button type="button">Select all</button>
    <table style="width:80%">
        <tr>
          <th>Name</th>
          <th>Lastname</th>
          <th>Age</th>
        </tr>
        <tr>
            <td>Henk</td>
            <td>Bakker</td>
            <td>46</td>
        </tr>
        <tr>
            <td>Fedde</td>
            <td>hooghouts</td>
            <td>67</td>
        </tr>
    </table>
</body>
</html>

【问题讨论】:

  • 是的,有可能。
  • 你试试用 javascript 或 jquery link
  • 如果是基本的HTML表格,可以直接使用menu - data - import from web导入excel,然后复制粘贴网址,选择正确的表格即可。如果您所做的只是为手动操作创建快捷方式,那么教我的用户比实际创建要选择的脚本更容易,然后按 ctrl-c,转到 excel,粘贴数据,重新格式化数据。

标签: javascript php html button


【解决方案1】:

JS:

function selectElementContents(el) {
        var body = document.body, range, sel;
        if (document.createRange && window.getSelection) {
            range = document.createRange();
            sel = window.getSelection();
            sel.removeAllRanges();
            try {
                range.selectNodeContents(el);
                sel.addRange(range);
            } catch (e) {
                range.selectNode(el);
                sel.addRange(range);
            }
        } else if (body.createTextRange) {
            range = body.createTextRange();
            range.moveToElementText(el);
            range.select();
        }
    }

HTML:

<table id="tableId" border="1">
    <thead>
        <tr><th>Heading 1</th><th>Heading 2</th></tr>
    </thead>
    <tbody>
        <tr><td>cell 1</td><td>cell 2</td></tr>
    </tbody>
</table>

<input type="button" value="select table" onclick="selectElementContents( document.getElementById('tableId') );">

它应该工作;)

链接来自: Select a complete table with Javascript

【讨论】:

  • 是不是也可以只选择复制tbody,龙骨布局?所以它也复制边界和东西?因为现在如果我将它粘贴到 excel 中,它会进入 1 个单元格
猜你喜欢
  • 2011-07-03
  • 1970-01-01
  • 2013-02-03
  • 1970-01-01
  • 2011-10-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多