/*** * name:加载表格或表单数据[通用] * name:load-table-or-form-data-common.js * * author:zengtai * date:2017-07-19 1501 * notice:原生javascript;兼容所有浏览器版本 */ /* * * 加载指定行的表格数据 * @param tableId:表格ID (指定数据类型:string) * @param lineNumber:所在的表格行号 (指定数据类型:number) * @return lineData:返回该行数据的数组 * @notice lineData仅包含tbody部分的内容 * @notice lineData将不包含td 的title属性为"useless-data"的文本数据 */ function getTableLineData(tableId, lineNumber) { //判断参数 if (arguments.length != 2) { throw new Error("Arguments' length is not qualified!"); } if (typeof(tableId) != 'string' || typeof(lineNumber) != 'number') { throw new Error("Arguments is not qualified!"); } var lineData = []; //行数据 //加载行数据到lineData中 var table = document.getElementById(tableId); var lines = table.getElementsByTagName('tr'); var line; //选中行 var tds; //选中行的单元格集合 /*** * 去除thead的影响,在getElementsByTagName('tr') 方法中; * thead将可以作为tr被索引到,但不一定所有的表格中均会使用thead */ var line = lines[lineNumber - 1]; //默认第lineNumber行是选中行 if (table.getElementsByTagName('thead')) { //排除 存在 thead标签的对dom操作的影响 line = lines[lineNumber]; } var tds = line.getElementsByTagName('td'); //支持 for (var i = 0; i < tds.length; i++) { if (tds[i].getAttribute('title') != 'useless-data') { lineData.push(tds[i].innerText.trim()); } } return lineData; } /** * 加载数据到表单元素中 * @param formId:表单ID;[不一定是Form元素,但一定得是填充数据的表单控件的祖先元素] * @param datas:数组数据[顺序加载到表单控件中] * @param datas_config: * 数组数据的配置项配置:数组中需要加载的元素对应值为true;反之为false;) * @notice 需要填充数据的项必须设置属性data-fill为'true' * @notice 需要填充数据的项必须设置类名 'data-fill' */ function loadDatasToForms(formId, datas, datas_config) { //判断参数 if (arguments.length != 3) { throw new Error("Arguments' length is not qualified!"); } if (typeof(formId) != 'string' || ((datas instanceof Array) != true)) { throw new Error("Arguments is not qualified!"); } var form = document.getElementById(formId); var inputs = form.getElementsByClassName('data-fill'); var j = 0; for (var i = 0; i < datas.length; i++) { if (datas_config[i] == true) { inputs[j].value = datas[i]; // console.log('test:inputs['+ j +']:' + inputs[j].value); // console.log('test:datas['+ i +']:' + datas[i]); j++; } } }
使用示例:
加载数据到模态框:
//step1.函数:
//加载表格行数据到模态框中 function doLoadLineDatasToModal(tableId, modalId, lineNumber) { var datas = getTableLineData(tableId, lineNumber); //获取表格行数据,返回该行数据的数组 var data_config = [false, true, true, false]; //配置要装载到模态框中的数组元素(配置方法见该API) loadDatasToForms(modalId, datas, data_config); //将数组数据装载到模态框中 }
//step2:表格
<table class="table table-border table-striped table-text-veritical-middle" id="independentStatistic_table"> <thead style="background-color: #118ee9;color: white"> <th style=" 15%;color:white">日期</th> <th style=" 15%;color:white">病历份数</th> <th style=" 40%;color:white">病历页数</th> <th style=" 15%;color:white">操作</th> </thead> <tbody> <tr> <td>2017-03-07</td> <td>30</td> <td>33</td> <td> <a href="" class="btn btn_view" data-toggle="modal" data-target="#myModal" onclick="doLoadLineDatasToModal('independentStatistic_table','load-modal-form',1);">修改</a> </td> </tr> <tr> <td>2017-03-08</td> <td>125</td> <td>23</td> <td> <a href="" class="btn btn_view" data-toggle="modal" data-target="#myModal" onclick="doLoadLineDatasToModal('independentStatistic_table','load-modal-form',2);">修改</a> </td> </tr> <tr> <td>2017-03-17</td> <td>20</td> <td>87</td> <td> <a href="" class="btn btn_view" data-toggle="modal" data-target="#myModal" onclick="doLoadLineDatasToModal('independentStatistic_table','load-modal-form',3);">修改</a> </td> </tr> <tr> <td>2017-04-09</td> <td>45</td> <td>98</td> <td> <a href="" class="btn btn_view" data-toggle="modal" data-target="#myModal" onclick="doLoadLineDatasToModal('independentStatistic_table','load-modal-form',4);">修改</a> </td> </tr> <tr> <td>2017-01-07</td> <td>19</td> <td>32</td> <td> <a href="" class="btn btn_view" data-toggle="modal" data-target="#myModal" onclick="doLoadLineDatasToModal('independentStatistic_table','load-modal-form',5);">修改</a> </td> </tr> <tr> <td>2017-03-28</td> <td>56</td> <td>45</td> <td> <a href="" class="btn btn_view" data-toggle="modal" data-target="#myModal" onclick="doLoadLineDatasToModal('independentStatistic_table','load-modal-form',6);">修改</a> </td> </tr> <tr> <td>2017-05-02</td> <td>2</td> <td>56</td> <td> <a href="" class="btn btn_view" data-toggle="modal" data-target="#myModal" onclick="doLoadLineDatasToModal('independentStatistic_table','load-modal-form',7);">修改</a> </td> </tr> <tr> <td>2017-06-06</td> <td>63</td> <td>36</td> <td> <a href="" class="btn btn_view" data-toggle="modal" data-target="#myModal" onclick="doLoadLineDatasToModal('independentStatistic_table','load-modal-form',8);">修改</a> </td> </tr> <tr> <td>2017-04-26</td> <td>89</td> <td>60</td> <td> <a href="" class="btn btn_view" data-toggle="modal" data-target="#myModal" onclick="doLoadLineDatasToModal('independentStatistic_table','load-modal-form',9);">修改</a> </td> </tr> <tr> <td>2017-03-06</td> <td>30</td> <td>33</td> <td> <a href="" class="btn btn_view" data-toggle="modal" data-target="#myModal" onclick="doLoadLineDatasToModal('independentStatistic_table','load-modal-form',10);">修改</a> </td> </tr> </tbody> </table>
//step3:效果图