JavaScript之加载表格、表单行数据[插件]

/***
 * 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:效果图