HTML 表格单元格增加双击复制功能

在 HTML 表格中，单元格内容复制有些不方便，考虑增加双击复制功能。

表格示例

<table id="resultInfo" >
  <thead>
	<tr>
	  <th>附件名称</th>
	  <th>附件MD5</th>
	  <th>附件大小</th>
	</tr>
  </thead>
  <tbody>
	<#list detailList as temp>
    <tr>
      <td class="message">${temp.attachName?default("")?html}</td>
      <td class="message">${temp.attachMD5?default("")?html}</td>
      <td class="message">${temp.attachSize?default("")?html}</td>
    </tr>
	</#list>
  </tbody>
  </div>
</table>

调用函数

<script>
$(function() {
    copyTableInfoById('mailAttachTaskResultInfo');
});
</script>

复制单元格函数

function copyTableInfoById(id){
  var idInfo = document.getElementById(id);
  var td=idInfo.getElementsByTagName("td");//查询所有td标签,组成数组
  for(var i=0;i<td.length;i++){//循环绑定点击事件
      td[i].ondblclick=function(){//绑定点击事件
        var info = strip(this.innerHTML);
        if(info==''){
            toastr.warning("复制内容为空，请确认！");
            return;
        }
        document.oncopy=function(e){
            e.clipboardData.setData('text',info);
            e.preventDefault();
            document.oncopy=null;
        };
        document.execCommand('Copy');
        toastr.success("已复制："+info);
      }
  }
}

其中：

function strip(html) {
   var tmp = document.createElement("div");
   tmp.innerHTML = html;
   var ulInfo = tmp.getElementsByTagName('ul');
   if(ulInfo!=null && ulInfo.length>0){
      ulInfo[0].remove();
   }
   return tmp.textContent.trim() || tmp.innerText.trim() || "";
}

toastr 弹出框

• 官网：https://codeseven.github.io/toastr/
• GitHub：https://github.com/CodeSeven/toastr
• 演示地址：https://codeseven.github.io/toastr/demo.html

toastr 引入

<link href="lib/toastr/2.1.4/toastr.css" rel="stylesheet">
   <script src="lib/toastr/2.1.4/toastr.min.js"></script>

注，toastr 是基于 jquery 的插件，需要先引入 jquery：

<script src="libs/jquery-2.0.2.min.js"></script>
<script src="libs/jquery-ui-1.10.3.min.js"></script>

toastr 配置

toastr.options = {
   "positionClass": "toast-center-center",  //弹出窗的位置
   "showDuration": "100",//显示的动画时间
   "hideDuration": "300", //消失的动画时间
   "timeOut": "1000" //展现时间
}

使用方法

对于其他 API 调用，看到演示。

toastr.info('Are you the 6 fingered man?')

其他选项

显示一个警告，没有标题

toastr.warning('My name is Inigo Montoya. You killed my father, prepare to die!')

显示一个成功，标题

toastr.success('Have fun storming the castle!', 'Miracle Max Says')

显示错误标题

toastr.error('I do not think that word means what you think it means.', 'Inconceivable!')

清除当前的列表

toastr.clear()