天天看點
傳回

使用js動态繪制報表

使用js動态繪制報表隻要惠靈活運用JQuery的.find().each（）.attr().filter().remove().indexOf().after().append()的方法就好弄HTML<tr>
    <td>
        <table id="servertab" width="100%" border="1" cellpadding="1" cellspacing="0"
               style="border:solid 1px #000000; text-align:center;">
            <thead>
            <tr>
                <td colspan="10" style="background: linear-gradient(#1818FC, #FFFFFF);">xxx伺服器</td>
            </tr>
            <tr>
                <td rowspan="2" colspan="2">名稱</td>
                <td colspan="3">CPU使用率</td>
                <td colspan="3">記憶體使用率</td>
                <td colspan="2">邏輯分區使用率</td>
            </tr>
            <tr>
                <td>最高值</td>
                <td>最高值時間</td>
                <td>平均值</td>
                <td>最高值</td>
                <td>最高值時間</td>
                <td>平均值</td>
                <td>分區名稱</td>
                <td>分區使用率</td>
            </tr>
            </thead>
            <tbody>
        
            </tbody>
        </table>
    </td>
</tr>
<tr>
    <td colspan="5" style="line-height: 20px;text-align:left;"><h3>xxx運作名額</h3></td>
</tr>

<tr>
    <td>
        <table id="databasetab" width="100%" border="1" cellpadding="1" cellspacing="0"
               style="border:solid 1px #000000; text-align:center;">
            <thead>
            <tr>
                <td colspan="3" style="background: linear-gradient(#1818FC, #FFFFFF);">資料庫</td>
                <td colspan="5" style="background: linear-gradient(#1818FC, #FFFFFF);">會話數</td>
            </tr>
            <tr>
                <td>資料庫名稱</td>
                <td>表空間名稱</td>
                <td>表空間使用率</td>
                <td>最大值</td>
                <td>最大值時間</td>
                <td>最小值</td>
                <td>最小值時間</td>
                <td>平均值</td>
            </tr>
            </thead>
            <tbody>
            
            </tbody>
        </table>
    </td>
</tr>
<tr>
    <td colspan="5" style="line-height: 20px;text-align:left;"><h3>xxx裝置運作名額</h3></td>
</tr>

<tr>
    <td>
        <table id="jfdlhjtab" width="100%" border="1" cellpadding="1" cellspacing="0"
               style="border:solid 1px #000000; text-align:center;">
            <thead>
            <tr>
                <td colspan="8" style="background: linear-gradient(#1818FC, #FFFFFF);">機房動力環境
                </td>
            </tr>
            <tr>
                <td>名稱</td>
                <td>參數</td>
                <td>裝置名稱</td>
                <td>最大值</td>
                <td>最大值時間</td>
                <td>最小值</td>
                <td>最小值時間</td>
                <td>平均值</td>
            </tr>
            <tbody>
            ${jfdlhjlist}
            </tbody>
        </table>
    </td>
</tr>js腳本//添加行
function addrow(tab, col, nowTr) {
    if (col == 1) {
        var str = '';
        if (tab.indexOf("server") >= 0) {
            if (serverrowindex) {
            } else {
                serverrowindex = 100;
            }
            str = servertrAdd.replace(new RegExp('@serverrowindex@', 'g'), serverrowindex + "");
            addTr(tab, nowTr, str);
            serverrowindex = parseInt(serverrowindex) + 1;
        }
       
        else {
            if (tab.indexOf("database") >= 0) {
                if (databaserowindex) {
                } else {
                    databaserowindex = 100;
                }
                str = databaseAdd.replace(new RegExp('@databaserowindex@', 'g'), databaserowindex + "");
                addTr(tab, nowTr, str);
                databaserowindex = parseInt(databaserowindex) + 1;
            } 
            else {
                if (tab.indexOf("jfdlhj") >= 0) {
                    if (jfdlhjrowindex) {
                    } else {
                        jfdlhjrowindex = 100;
                    }
                    str = jfdlhjAdd.replace(new RegExp('@jfdlhjrowindex@', 'g'), jfdlhjrowindex + "");
                    addTr(tab, nowTr, str);
                    jfdlhjrowindex = parseInt(jfdlhjrowindex) + 1;
                }
            }
        }
    } else {
        
                if (tab.indexOf("database") >= 0) {
                    $(nowTr).parent().parent().find("input").each(function () {
                        var field = $(this).attr('id');
                        if (field && field.indexOf("databasefieldName") >= 0) {
                            aftername = $(this).attr('value');
                        }
                        if (field && field.indexOf("databasefieldValue") >= 0) {
                            afterid = $(this).attr('value');
                        }
                    })
                    tr = '<tr><td style="width:30%;">';
                    tr = tr + '<input type="text" name="arys[@0@].fieldName" id="' + databaserowindex + 'databasefieldName" class="input_box" style="width:160px;" value="' + aftername + '" οnclick="javascript:choosedatabase(this);"/>';
                    tr = tr + '<input type="hidden" name="arys[@0@].fieldValue" id="' + databaserowindex + 'databasefieldValue" value="' + afterid + '"/>';
                    tr = tr + '<input type="hidden" name="arys[@0@].orderNo" id="' + databaserowindex + 'databaseorderNo" value="@0@" />';
                    tr = tr + '<input type="button" id="adddatabase" οnclick="javascript:addrow(\'databasetab\',1,this)"  style="width:45px;" value="新增行"/>';
                    tr = tr + '<input type="button" id="deldatabase" οnclick="javascript:delrow(this)" style="width:45px;" value="删除行"/>';
                    tr = tr + '</td><td style="width:30%;">';
                    tr = tr + '<input type="text" name="arys[@0@].param1" id="' + databaserowindex + 'databaseparam1" class="input_box" style="width:160px;" οnclick="javascript:choosedatabase2(this);"/>';
                    tr = tr + '<input type="hidden" name="arys[@0@].param2" id="' + databaserowindex + 'databaseparam2" />';
                    tr = tr + '<input type="hidden" name="arys[@0@].viewType" id="' + databaserowindex + 'databaseviewType" value="database" />';
                    tr = tr + '<input type="button"  id="adddatabase" οnclick="javascript:addrow(\'databasetab\',2,this)"  style="width:45px;" value="新增行"/>';
                    tr = tr + '<input type="button" id="deldatabase" οnclick="javascript:delrow(this)" style="width:45px;" value="删除行"/></td>';
                    tr = tr + '<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>';
                    databaserowindex = parseInt(databaserowindex) + 1;
                
                }
            }
            addTr(tab, nowTr, tr);
            
        } else {
            if (col == 3) {
                if (tab.indexOf("jfdlhj" >= 0)) {
                    $(nowTr).parent().parent().find("input").each(function () {
                        var field = $(this).attr('id');
                        if (field && field.indexOf("jfdlhjparam1") >= 0) {
                            aftername = $(this).attr('value');
                        }
                        if (field && field.indexOf("jfdlhjparam2") >= 0) {
                            aftername2 = $(this).attr('value');
                        }
                    })
                    tr = '<tr><td style="width:22%;">';
                    tr = tr + '<input type="text" name="arys[@0@].param1" id="' + jfdlhjrowindex + 'jfdlhjparam1"  value="' + aftername + '" class="input_box" style="width:80px;" />';
                    tr = tr + '<input type="button" id="addjfdlhj" οnclick="javascript:addrow(\'jfdlhjtab\',1,this)"  style="width:50px;" value="新增行"/>';
                    tr = tr + '<input type="button" id="deljfdlhj" οnclick="javascript:delrow(this)" style="width:50px;" value="删除行"/>';
                    tr = tr + '</td><td style="width:22%;">';
                    tr = tr + '<input type="text" name="arys[@0@].param2" id="' + jfdlhjrowindex + 'jfdlhjparam2"  value="' + aftername2 + '" class="input_box" style="width:80px;"/>';
                    tr = tr + '<input type="button" id="addjfdlhj" οnclick="javascript:addrow(\'jfdlhjtab\',2,this)"  style="width:50px;" value="新增行"/>';
                    tr = tr + '<input type="button" id="deljfdlhj" οnclick="javascript:delrow(this)" style="width:50px;" value="删除行"/>';
                    tr = tr + '</td><td style="width:22%;">';
                    tr = tr + '<input type="text" name="arys[@0@].fieldName" id="' + jfdlhjrowindex + 'jfdlhjfieldName" class="input_box" style="width:70px;" οnclick="javascript:choosejfdlhj(this);"/>';
                    tr = tr + '<input type="hidden" name="arys[@0@].fieldValue" id="' + jfdlhjrowindex + 'jfdlhjfieldValue"/>';
                    tr = tr + '<input type="hidden" name="arys[@0@].orderNo" id="' + jfdlhjrowindex + 'jfdlhjorderNo" value="@0@" />';
                    tr = tr + '<input type="hidden" name="arys[@0@].viewType" id="' + jfdlhjrowindex + 'jfdlhjviewType" value="jfdlhj" />';
                    tr = tr + '<input type="button"  id="addjfdlhj" οnclick="javascript:addrow(\'jfdlhjtab\',3,this)"  style="width:50px;" value="新增行"/>';
                    tr = tr + '<input type="button" id="deljfdlhj" οnclick="javascript:delrow(this)" style="width:50px;" value="删除行"/></td>';
                    tr = tr + '<td> </td><td> </td><td> </td><td> </td><td> </td></tr>';
                    jfdlhjrowindex = parseInt(jfdlhjrowindex) + 1;
                }
                addTr(tab, nowTr, tr);
            }
        }
    }

}

//删除行
function delrow(nowTr) {
    if (serverrowindex <= 2) return;
    delTr($(nowTr).parent().parent());
}

//tab排序
function orderTabAll() {
    var num = orderyTab('servertab', 0);
    num = orderyTab('databasetab', num);
    num = orderyTab('jfdlhjtab', num);
   
}

//tab排序
function orderyTab(tab, beginnum) {
    var tabhtml = '';
    var att = beginnum;
    $("#" + tab + " tr").each(function () {
        var trs = $(this).children();
        if (trs) {
            var num = 0;
            trs.find("input").each(function () {
                var aname = $(this).attr('name');
                var aid = $(this).attr('id');
                var type = $(this).attr('type');
                if (type == 'text' || type == 'hidden') {
                    num = num + 1;
                    if (aname) {
                        aname = aname.replace(/\[.+\]/, "[" + att + "]");
                        $('#' + aid).attr('name', aname);
                    }
                    if (aname && aname.indexOf('orderNo') >= 0) {
                        $('#' + aid).attr('value', att);
                    }
                }
            });
            if (trs.length > 0 && num > 0) att = att + 1;


        }
    });
    return att;
}

/**
 * 為table指定行添加一行
 *
 * tab 表id
 * row 行數，如：0->第一行 1->第二行 -2->倒數第二行 -1->最後一行
 * trHtml 添加行的html代碼
 *
 */
function addTr(tab, nowTr, trHtml) {
    //擷取table最後一行 $("#tab tr:last")
    //擷取table第一行 $("#tab tr").eq(0)
    //擷取table倒數第二行 $("#tab tr").eq(-2)
    var $tr = $(nowTr).parent().parent();
    $tr.after(trHtml);
}

function delTr(nowTr) {
    var $tr = $(nowTr);
    $tr.remove();
}      
/**
 * 合并列
 * @param table_id table ID
 * @param table_colnum 第幾列
 */
function mergetable_rowspan(table_id, table_colnum) {
    var table_firsttd = "";
    var table_currenttd = "";
    var table_SpanNum = 0;
    table_Obj = $(table_id + " tr td:nth-child(" + table_colnum + ")");
    table_Obj.each(function (i) {
        if (i == 0) {
            table_firsttd = $(this);
            table_SpanNum = 1;
        } else {
            table_currenttd = $(this);
            if (table_firsttd.text() == table_currenttd.text()) {
                table_SpanNum++;
                table_currenttd.remove();
                table_firsttd.attr("rowSpan", table_SpanNum);
            } else {
                table_firsttd = $(this);
                table_SpanNum = 1;
            }
        }
    });
}

jQuery.fn.rowspan = function (colIdx) { //封裝的一個JQuery小插件
    return this.each(function () {
        var that;
        $('tr', this).each(function (row) {
            $('td:eq(' + colIdx + ')', this).filter(':visible').each(function (col) {
                if (that != null && $(this).html() == $(that).html()) {
                    rowspan = $(that).attr("rowSpan");
                    if (rowspan == undefined) {
                        $(that).attr("rowSpan", 1);
                        rowspan = $(that).attr("rowSpan");
                    }
                    rowspan = Number(rowspan) + 1;
                    $(that).attr("rowSpan", rowspan);
                    $(this).remove();//.hide();
                } else {
                    that = this;
                }
            });
        });
    });
}      
// 伺服器
var servertrAdd = '<tr><td style="width:230px;">';
servertrAdd = servertrAdd + '<input type="text" name="arys[@0@].param1" id="@serverrowindex@serverparam" class="input_box" style="width:100px;" />';
servertrAdd = servertrAdd + '<input type="button" id="addserver" οnclick="javascript:addrow(\'servertab\',1,this)"  style="width:50px;" value="新增行"/>';
servertrAdd = servertrAdd + '<input type="button" id="delserver" οnclick="javascript:delrow(this)" style="width:50px;" value="删除行"/></td>';
servertrAdd = servertrAdd + '<td><input type="text" name="arys[@0@].fieldName" id="@serverrowindex@serverfieldName" class="input_box" style="width:100px;" οnclick="javascript:chooseserver(this);"/>';
servertrAdd = servertrAdd + '<input type="hidden" name="arys[@0@].fieldValue" id="@serverrowindex@serverfieldValue"/>';
servertrAdd = servertrAdd + '<input type="hidden" name="arys[@0@].orderNo" id="@serverrowindex@serverorderNo" value="@0@" />';
servertrAdd = servertrAdd + '<input type="hidden" name="arys[@0@].viewType" id="@serverrowindex@serverviewType" value="server" />';
servertrAdd = servertrAdd + '<input type="button"  id="addserver" οnclick="javascript:addrow(\'servertab\',2,this)"  style="width:50px;" value="新增行"/>';
servertrAdd = servertrAdd + '<input type="button" id="delserver" οnclick="javascript:delrow(this)" style="width:50px;" value="删除行"/></td>';
servertrAdd = servertrAdd + '<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>'
    + '<td><input type="text" name="arys[@0@].param2" id="@serverrowindex@param2" class="input_box" style="width:100px;" οnclick="javascript:chooseserverdisk(this);"/>'
    + '<input type="hidden" name="arys[@0@].param3" id="@serverrowindex@param3"/>'
    + '</td><td><input type="text" name="arys[@0@].param4" id="@serverrowindex@param4" style="width:80px;"/></td></tr>';
//資料庫
var databaseAdd = '<tr><td style="width:30%;">';
databaseAdd = databaseAdd + '<input type="text" name="arys[@0@].fieldName" id="@databaserowindex@databasefieldName" class="input_box" style="width:160px;" οnclick="javascript:choosedatabase(this);"/>';
databaseAdd = databaseAdd + '<input type="hidden" name="arys[@0@].fieldValue" id="@databaserowindex@databasefieldValue"/>';
databaseAdd = databaseAdd + '<input type="hidden" name="arys[@0@].orderNo" id="@databaserowindex@databaseorderNo" value="@0@" />';
databaseAdd = databaseAdd + '<input type="button" id="adddatabase" οnclick="javascript:addrow(\'databasetab\',1,this)"  style="width:45px;" value="新增行"/>';
databaseAdd = databaseAdd + '<input type="button" id="deldatabase" οnclick="javascript:delrow(this)" style="width:45px;" value="删除行"/>';
databaseAdd = databaseAdd + '</td><td style="width:30%;">';
databaseAdd = databaseAdd + '<input type="text" name="arys[@0@].param1" id="@databaserowindex@databaseparam1" class="input_box" style="width:160px;" οnclick="javascript:choosedatabase2(this);"/>';
databaseAdd = databaseAdd + '<input type="hidden" name="arys[@0@].param2" id="@databaserowindex@databaseparam2" />';
databaseAdd = databaseAdd + '<input type="hidden" name="arys[@0@].viewType" id="@databaserowindex@databaseviewType" value="database" />';
databaseAdd = databaseAdd + '<input type="button"  id="adddatabase" οnclick="javascript:addrow(\'databasetab\',2,this)"  style="width:45px;" value="新增行"/>';
databaseAdd = databaseAdd + '<input type="button" id="deldatabase" οnclick="javascript:delrow(this)" style="width:45px;" value="删除行"/></td>';
databaseAdd = databaseAdd + '<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>';
//
var jfdlhjAdd = '<tr><td style="width:22%;">';
jfdlhjAdd = jfdlhjAdd + '<input type="text" name="arys[@0@].param1" id="@jfdlhjrowindex@jfdlhjparam1" class="input_box" style="width:80px;" />';
jfdlhjAdd = jfdlhjAdd + '<input type="button" id="addjfdlhj" οnclick="javascript:addrow(\'jfdlhjtab\',1,this)"  style="width:50px;" value="新增行"/>';
jfdlhjAdd = jfdlhjAdd + '<input type="button" id="deljfdlhj" οnclick="javascript:delrow(this)" style="width:50px;" value="删除行"/>';
jfdlhjAdd = jfdlhjAdd + '</td><td style="width:22%;">';
jfdlhjAdd = jfdlhjAdd + '<input type="text" name="arys[@0@].param2" id="@jfdlhjrowindex@jfdlhjparam2"  class="input_box" style="width:80px;"/>';
jfdlhjAdd = jfdlhjAdd + '<input type="button" id="addjfdlhj" οnclick="javascript:addrow(\'jfdlhjtab\',2,this)"  style="width:50px;" value="新增行"/>';
jfdlhjAdd = jfdlhjAdd + '<input type="button" id="deljfdlhj" οnclick="javascript:delrow(this)" style="width:50px;" value="删除行"/>';
jfdlhjAdd = jfdlhjAdd + '</td><td style="width:22%;">';
jfdlhjAdd = jfdlhjAdd + '<input type="text" name="arys[@0@].fieldName" id="@jfdlhjrowindex@jfdlhjfieldName" class="input_box" style="width:70px;" οnclick="javascript:choosejfdlhj(this);"/>';
jfdlhjAdd = jfdlhjAdd + '<input type="hidden" name="arys[@0@].fieldValue" id="@jfdlhjrowindex@jfdlhjfieldValue"/>';
jfdlhjAdd = jfdlhjAdd + '<input type="hidden" name="arys[@0@].orderNo" id="@jfdlhjrowindex@jfdlhjorderNo" value="@0@" />';
jfdlhjAdd = jfdlhjAdd + '<input type="hidden" name="arys[@0@].viewType" id="@jfdlhjrowindex@jfdlhjviewType" value="jfdlhj" />';
jfdlhjAdd = jfdlhjAdd + '<input type="button"  id="addjfdlhj" οnclick="javascript:addrow(\'jfdlhjtab\',3,this)"  style="width:50px;" value="新增行"/>';
jfdlhjAdd = jfdlhjAdd + '<input type="button" id="deljfdlhj" οnclick="javascript:delrow(this)" style="width:50px;" value="删除行"/></td>';
jfdlhjAdd = jfdlhjAdd + '<td> </td><td> </td><td> </td><td> </td><td> </td></tr>';
jquery html 報表 javascript 删除行
上一篇: LeetCode-Leaf-Similar Trees
下一篇: 為什麼 DevOps 會失敗？

繼續閱讀