js實現自定義修改網頁中表格信息

項目中的打印頁面，為提高用戶體驗，需要增自定修改表格內容的功能，以下是使用示意圖（雙擊td標簽部分的內容，可自定義修改）：

 

以下是js插件源碼，存為edit.js文件：

var tbl, tbt;  2 
var body = document.getElementsByTagName('body');  4 
var tb = document.getElementsByTagName("table");  6 tbl = tb[0].offsetLeft;  7 tbt = tb[0].offsetTop;  8 
var list = httpCollectionToArray(document.getElementsByTagName("td")); 10 
list.forEach(function (value) { 12     value.addEventListener('dblclick', function () { 13  blurEdit(); 14         var left = tbl + value.offsetLeft - 5; 15         var top = tbt + value.offsetTop - 5; 16         var width = value.offsetWidth + 10; 17         var height = value.offsetHeight + 10; 18         var div = document.createElement('div'); 19         div.style.cssText = "position:absolute;width:" + width + "px;height:" + height + "px;border:2px solid #000;top:" + top + ";left:" + left + ";"; 20         var textarea = document.createElement('textarea'); 21         textarea.setAttribute("class", "editTextarea"); 22         textarea.style.cssText = "width:" + width + "px;height:" + height + "px;resize:none;"; 23 
        var text = document.createTextNode(value.innerText); 25  textarea.appendChild(text); 26  div.appendChild(textarea); 27 
        textarea.addEventListener('blur', function () { 29             var text = document.getElementsByClassName('editTextarea')[0].value; 30 　　　　　　　// 轉換文本中的回車符和空格符
            text = text.replace(/\n/g, "<br/>"); 32             text = text.replace(/\s/g, "&nbsp;"); 33             value.innerHTML = text; 34             body[0].removeChild(div); 35  }); 36 
        body[0].appendChild(div); 38         document.getElementsByClassName('editTextarea')[0].focus(); 39  }); 40 }); 41 
function blurEdit() { 43     var focus = httpCollectionToArray(document.getElementsByClassName('editTextarea')); 44     focus.forEach(function (value) { 45  value.blur(); 46  }); 47 } 48 
function httpCollectionToArray(collections) { 50     var array = []; 51     for (var i = 0; i < collections.length; i++) { 52         array[i] = collections[i]; 53  } 54     return array; 55 }

 使用方法：在對應的前端頁面引入edit.js文件，如下：

<script src="<c:url value="/staticmedia/scripts/edit.js"/>"