js插件---在線類似excel生成圖表插件解決方案
一、總結
一句話總結：google比百度好用多了，多用google
google比百度好用多了，多用google
找准關鍵字+多嘗試關鍵字：google js editable table jquery 雙向綁定
這種可編輯的表格一定是雙向綁定，那么可以vue和angular，
終於找到了
多換幾個關鍵詞搜索就好了
js editable table
沒找到
換juqery editable table找到了
二、 幾個Dynamic editable table
1、Vue JS| Dynamic editable table？
https://codepen.io/Pizzi/pen/GMOQXy
2、js-grid？
http://js-grid.com/demos/
3、GIJGO？
開源
4、SpreadJS？
High-speed Excel-like JavaScript spreadsheet components
就是網絡版的excel 功能全 但是 要錢
5、mdbootstrap？
https://mdbootstrap.com/docs/jquery/tables/editable/#!
6、Dynamic Editable Table Plugin With jQuery - TableEdit.js？
優勢是行列都可以添加，刪除也很方便
缺點是用戶少，bug卻不少
https://www.jqueryscript.net/tags.php?/editable%20table/
https://www.jqueryscript.net/table/Editable-Table-Plugin-jQuery-TableEdit.html
7、這種動態生成指定行列表格的方式？
https://divtable.com/generator/
8、找了一圈都不合適，只有自己寫了？
https://www.jqueryscript.net/demo/Stylish-Editable-Table-Plugin-with-jQuery-Bootstrap-2-3-Editable-Table/
找了一圈都不合適，只能自己找個基礎的，自己改自己加
https://www.jqueryscript.net/demo/Stylish-Editable-Table-Plugin-with-jQuery-Bootstrap-2-3-Editable-Table/
最后選了這個
9、可編輯表格的實現原理是什么？
input 位置 單元格
可以編輯的是input標簽，點哪里，就把input放到點擊那里，input失去焦點的時候把input的值傳遞給那個那個表格的單元格就好，
或者：
td里面放一個span一個input，不編輯的時候顯示span，編輯的時候顯示input，其實也都非常好實現，
相比於上一種方法，input多了幾個，不過完全不影響的
三、editableTableWidget---比較基礎的可編輯表格模型（沒有樣式）
其實實現原理非常簡單：可以編輯的是input標簽，點哪里，就把input放到點擊那里，input失去焦點的時候把input的值傳遞給那個那個表格的單元格就好，
核心的就是一個mindmup-editabletable.js
使用起來也簡單
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 6 <title>Tiny editable jQuery Bootstrap spreadsheet from MindMup</title> 7 8 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 9 <meta name="keywords" content="opensource jquery bootstrap editable table spreadsheet" /> 10 <meta name="description" content="This tiny jQuery bootstrap plugin turns any table into an editable spreadsheet" /> 11 12 13 14 15 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 16 <script src="mindmup-editabletable.js"></script> 17 </head> 18 <body> 19 <div> 20 21 <div class="pull-right"> 22 </div> 23 <h1>editableTableWidget<br/> <small>tiny editable jQuery Bootstrap spreadsheet</small></h1> 24 <hr/> 25 <div class="alert alert-error hide"> 26 That would cost too much 27 </div> 28 <table id="mainTable" class="table table-striped"> 29 <thead><tr><th>Name</th><th>rewr</th><th>Profit</th><th>Fun</th></tr></thead> 30 <tbody> 31 <tr><td>Car2121</td><td>Car</td><td>200</td><td>0</td></tr> 32 <tr><td>Bike</td><td>330</td><td>240</td><td>1</td></tr> 33 <tr><td>Plane</td><td>430</td><td>540</td><td>3</td></tr> 34 <tr><td>Yacht</td><td>100</td><td>200</td><td>0</td></tr> 35 <tr><td>Segway</td><td>330</td><td>240</td><td>1</td></tr> 36 </tbody> 37 </table> 38 <h2><small>just start typing to edit, or move around with arrow keys or mouse clicks!</small></h2> 39 40 </div> 41 42 <script> 43 $('#mainTable').editableTableWidget().find('td:first').focus(); 44 $('#textAreaEditor').editableTableWidget({editor: $('<textarea>')}); 45 46 </script> 47 48 </body> 49 </html>