从HTML表复制到剪贴板的用户选择引入了标签

时间：2019-02-06 21:14:21

标签： jquery html css

我有一个显示零件号的HTML表，其中各个组件位于不同的<td></td>中。当用户选择/突出显示该行时，他们可以复制零件号并粘贴到所需的任何位置。

但是，然后在部件号上粘贴制表符，以表示不同的<td>单元格在字符之间的位置。

如何使用户选择表行并获得零件编号的干净版本（无选项卡）？

<table class="abPartNum">
    <tbody>
    <tr>
    <th>Series Designator</th>
    <th></th><th>Rows</th>
    <th>Body Style</th>
    <th>Body Material</th>
    <th></th>
    <th>Size</th>
    <th></th>
    <th>Contact Type</th>
    <th>Contact Plating</th>
    <th></th>
    <th>Hardware Style</th>
    <th>Polarization</th>
    <th></th>
    <th>Options</th>
    </tr>
    <tr>
    <td class="pnCell">MK</td>
    <td>-</td>
    <td class="pnCell">2</td>
    <td class="pnCell">5</td>
    <td class="pnCell">2</td>
    <td>-</td>
    <td class="pnCell">009</td>
    <td>-</td>
    <td class="pnCell">32</td>
    <td class="pnCell">3</td>
    <td>-</td>
    <td class="pnCell">22</td>
    <td class="pnCell">0R</td>
    <td>-</td>
    <td class="pnCell">
    </td>
    </tr>
    </tbody>
    </table>

复制和粘贴的结果： MK - 2 5 2 - 009 - 32 3 - 22 0R

所需结果： MK-252-009-323-22-0R

4 个答案:

答案 0 :(得分：2)

如果您仅可以指示用户单击表行中的任意位置，那么您将到达该位置：

$('td').click(function(){
  var txt = $(this).parent().children().text()

  $("#result").text(txt)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
table, td { border-collapse:collapse; border: 1px solid black; }
</style>
<table class="abPartNum">
  <tbody>
    <tr>
      <th>Series Designator</th><th></th><th>Rows</th><th>Body Style</th><th>Body Material</th><th></th><th>Size</th><th></th><th>Contact Type</th><th>Contact Plating</th><th></th><th>Hardware Style</th><th>Polarization</th><th></th><th>Options</th>
    </tr>
    <tr>
      <td class="pnCell">MK</td><td>-</td><td class="pnCell">2</td><td class="pnCell">5</td><td class="pnCell">2</td><td>-</td><td class="pnCell">009</td><td>-</td><td class="pnCell">32</td><td class="pnCell">3</td><td>-</td><td class="pnCell">22</td><td class="pnCell">0R</td><td>-</td><td class="pnCell"></td>
    </tr>
  </tbody>
</table>
<hr />
<p id="result"></p>

（注意：我已经对其进行了编辑，以包括copy event's setData，但是我的测试表明，它有问题，至少在Firefox上如此，所以回到了简单的版本。）

答案 1 :(得分：0)

您可以使用javascript将这些单元格中的值连接为一个值，该值可以由用户以所需的格式在表的其他列中复制。例如：

HTML整理如下：

const changeEventHandler = e => {
    const value = e.target.options[e.target.selectedIndex].value;
    console.log(value); //Validate value...
}

const select = document.querySelector('select[name=question3]').onchange = changeEventHandler;

然后使用以下javascript 

<style type="">

td {border: solid 1px black;}
th {padding:10px;}
</style>
<table class="abPartNum" style="border:solid 1px black;">
<tbody>
<tr>
<th>Series Designator</th>
<th>Rows</th>
<th>Body Style</th>
<th>Body Material</th>

<th>Size</th>

<th>Contact Type</th>
<th>Contact Plating</th>

<th>Hardware Style</th>
<th>Polarization</th>

<th>Options</th>
<th>Complete code</th>
</tr>
<tr>
<td class="pnCell">MK</td>

<td class="pnCell">2</td>
<td class="pnCell">5</td>
<td class="pnCell">2</td>

<td class="pnCell">009</td>

<td class="pnCell">32</td>
<td class="pnCell">3</td>

<td class="pnCell">22</td>
<td class="pnCell">0R</td>

<td class="pnCell">
</td>
<td class="complete"></td>
</tr>

</tbody>
</table>

答案 2 :(得分：0)

对此的浏览器支持可能有点粗略：https://caniuse.com/#feat=clipboard

您可以使用剪贴板API：https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/clipboardData

与其他答案不同，如果要在浏览器外部进行复制，这实际上会调整剪贴板中的数据。

$(".abPartNum").on("copy", function(e){
    
    //Get selected data and remove white space
    var pastedData = window.getSelection().toString().replace(/\s/g, "");
    
    //Set the clipboard data
    if (window.clipboardData) {
      //Handle IEs non standard implemtation
      window.clipboardData.setData('text', pastedData);
    }else{
    
    (e.clipboardData || e.originalEvent.clipboardData).setData("text", pastedData);    
    }
    
    //Prevent the normal copy from happening
    e.preventDefault();
    
    //For Debugging
    console.log(pastedData);
} );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table class="abPartNum">
<tbody>
<tr>
<th>Series Designator</th>
<th></th><th>Rows</th>
<th>Body Style</th>
<th>Body Material</th>
<th></th>
<th>Size</th>
<th></th>
<th>Contact Type</th>
<th>Contact Plating</th>
<th></th>
<th>Hardware Style</th>
<th>Polarization</th>
<th></th>
<th>Options</th>
</tr>
<tr>
<td class="pnCell">MK</td>
<td>-</td>
<td class="pnCell">2</td>
<td class="pnCell">5</td>
<td class="pnCell">2</td>
<td>-</td>
<td class="pnCell">009</td>
<td>-</td>
<td class="pnCell">32</td>
<td class="pnCell">3</td>
<td>-</td>
<td class="pnCell">22</td>
<td class="pnCell">0R</td>
<td>-</td>
<td class="pnCell">
</td>
</tr>
</tbody>
</table>

Paste Here:
<textarea></textarea>

这可能是更好的用户体验

$(".abPartNum tbody tr").on("click", function(e){    
    $(".abPartNum tbody tr").removeClass("active");
    $(this).addClass("active");
    var pastedData = $(this).children().text();
    $("#tmpCode").val(pastedData).select();
    
    //initiate copy
    document.execCommand('copy');  
    
    //For Debugging
    console.log(pastedData);
} );
.active {
  background-color: #CCF;
}

#tmpCode {display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
Cick on table row to copy Part Number
<table class="abPartNum">
<thead>
<tr>
<th>Series Designator</th>
<th></th><th>Rows</th>
<th>Body Style</th>
<th>Body Material</th>
<th></th>
<th>Size</th>
<th></th>
<th>Contact Type</th>
<th>Contact Plating</th>
<th></th>
<th>Hardware Style</th>
<th>Polarization</th>
<th></th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr>
<td class="pnCell">MK</td>
<td>-</td>
<td class="pnCell">2</td>
<td class="pnCell">5</td>
<td class="pnCell">2</td>
<td>-</td>
<td class="pnCell">009</td>
<td>-</td>
<td class="pnCell">32</td>
<td class="pnCell">3</td>
<td>-</td>
<td class="pnCell">22</td>
<td class="pnCell">0R</td>
<td>-</td>
<td class="pnCell">
</td>
</tr>
<tr>
<td class="pnCell">MK</td>
<td>-</td>
<td class="pnCell">2</td>
<td class="pnCell">5</td>
<td class="pnCell">2</td>
<td>-</td>
<td class="pnCell">009</td>
<td>-</td>
<td class="pnCell">32</td>
<td class="pnCell">3</td>
<td>-</td>
<td class="pnCell">22</td>
<td class="pnCell">0R</td>
<td>-</td>
<td class="pnCell">01
</td>
</tr>
<tr>
<td class="pnCell">MK</td>
<td>-</td>
<td class="pnCell">2</td>
<td class="pnCell">5</td>
<td class="pnCell">2</td>
<td>-</td>
<td class="pnCell">009</td>
<td>-</td>
<td class="pnCell">32</td>
<td class="pnCell">3</td>
<td>-</td>
<td class="pnCell">23</td>
<td class="pnCell">0R</td>
<td>-</td>
<td class="pnCell">
</td>
</tr>
</tbody>
</table>
<input id="tmpCode" />

Paste Here:
<textarea></textarea>

答案 3 :(得分：0)

解决此问题的一种方法可能是在表的每一行上为每个可以复制的代码创建一个复制按钮。在该行的一个单元格中，包括一个输入字段，其中包含该行的代码值，并为其设置不透明度0以将其隐藏。然后，您可以使用相同的ID作为其代码将复制按钮链接到输入字段。单击复制按钮后，它将使用JavaScript select（）函数复制输入字段的值，然后使用execCommand（“ copy”）将选定的代码发送到剪贴板：

function copyText(copyId) {
  var copyCode = document.getElementById(copyId);
  copyCode.select();
  document.execCommand("copy");
}
.textToCopy {
  opacity: 0;
}
<table class="abPartNum">
  <tbody>
    <tr>
      <th>Series Designator</th>
      <th></th>
      <th>Rows</th>
      <th>Body Style</th>
      <th>Body Material</th>
      <th></th>
      <th>Size</th>
      <th></th>
      <th>Contact Type</th>
      <th>Contact Plating</th>
      <th></th>
      <th>Hardware Style</th>
      <th>Polarization</th>
      <th></th>
      <th>Options</th>
      <th></th>
    </tr>
    <tr>
      <td class="pnCell">MK</td>
      <td>-</td>
      <td class="pnCell">2</td>
      <td class="pnCell">5</td>
      <td class="pnCell">2</td>
      <td>-</td>
      <td class="pnCell">009</td>
      <td>-</td>
      <td class="pnCell">32</td>
      <td class="pnCell">3</td>
      <td>-</td>
      <td class="pnCell">22</td>
      <td class="pnCell">0R</td>
      <td>-</td>
      <td class="pnCell">
      </td>
      <td><button onClick="copyText('MK-252-009-323-220R')">Copy code</button><input id="MK-252-009-323-220R" class="textToCopy" value="MK-252-009-323-220R"></td>
    </tr>
  </tbody>
</table>

相关问题
最新问题