问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

仅选择 HTML 表格中的一列

社区维基
1
新手上路，请多包涵

我需要使用鼠标指针从 HTML 表格中选择单个列的文本。

例如考虑下表。

在此处输入图像描述

在此表中，我不能单独选择 姓氏 列的文本。相反，在向下拖动鼠标时，表格的其余内容也会被选中。

最终目的是单独选择每一列。请问有什么方法可以选择表格中单列的文字吗？

尝试了所有不同的选项 -moz-user-select ，但没有任何效果。

原文由 Nagaraja Thangavelu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译jqueryhtmlcss
阅读 1.1k
2 个回答
得票最新
社区维基
1
✓ 已被采纳

如果您希望列是可选的，则必须在 HTML 中提供该结构。这将涉及在表中使用表，如下所示： http ://codepen.io/DavidvanDriessche/pen/jqbeqK

基本方法是制作一个只有一行的外表。该行具有所需数量的列 (td) 元素（虽然示例显示了三个，但可以轻松地将其调整为您想要/需要的任意数量的列。

这些 td 元素包含它们自己的表，其中只有行（每行只有一列）。现在可以单独选择列。

 <table><tr>

    <td>
      <table>
        <tr><th>First name</th></tr>
        <tr><td>David</td></tr>
        <tr><td>Frank</td></tr>
        <tr><td>Bob</td></tr>
      </table>
    </td>

    <td>
      <table>
        <tr><th>Last name</th></tr>
        <tr><td>David</td></tr>
        <tr><td>Frank</td></tr>
        <tr><td>Bob</td></tr>
      </table>
    </td>

    <td>
      <table>
        <tr><th>Third name</th></tr>
        <tr><td>David</td></tr>
        <tr><td>Frank</td></tr>
        <tr><td>Bob</td></tr>
      </table>
    </td>

</tr></table>

原文由 David van Driessche 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

为您的姓氏添加一个类并添加此 css 属性。

这是 jsfiddle 的另一种方式。

 table, th, td {
    border: 1px solid black;
}
.unselectable {
    -webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select:none;
	user-select: none;
}
.selectable {
    -webkit-touch-callout: all;
	-webkit-user-select: all;
	-khtml-user-select: all;
	-moz-user-select: all;
	-ms-user-select: all;
	-o-user-select:all;
	user-select: all;
}

 <html>
  <head>

  </head>
  <body>
    <h2>Add some css to lastname</h2>

    <table>
      <tr>
        <th class="unselectable">Firstname</th>
        <th class="selectable">Lastname</th>
      </tr>
      <tr>
        <td class="unselectable">Peter</td>
        <td class="selectable">Griffin</td>
      </tr>
      <tr>
        <td class="unselectable">Lois</td>
        <td class="selectable">Griffin</td>
      </tr>
     </table>

  </body>
</html>

原文由 Shohidul Alam 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题