/***
* 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="width: 15%;color:white">日期</th>
<th style="width: 15%;color:white">病历份数</th>
<th style="width: 40%;color:white">病历页数</th>
<th style="width: 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:效果图
![JavaScript之加载表格、表单行数据[插件]](https://image.shishitao.com:8440/aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhCekwybHRZV2RsY3pJd01UVXVZMjVpYkc5bmN5NWpiMjB2WW14dlp5OHhNVGN6TmpFM0x6SXdNVGN3Tnk4eE1UY3pOakUzTFRJd01UY3dOekU1TVRnd01ETXpOVEl4TFRFd016QXpNVFU1TWpRdWFuQm4uanBn.jpg?w=700 "JavaScript之加载表格、表单行数据[插件]")