Discuz addrow函数解析

2021-03-21 859 0条评论

用于在表格中插入新行, 可结合实际需求自行二开

函数定义:static\js\common.js

使用示范:

<!DOCTYPE html>
<html>
<head>
    <title>discuz中addrow函数demo</title>
    <meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
    var addrowdirect = 0;
    var addrowkey = 0;
    function addrow(obj, type) {
        var table = obj.parentNode.parentNode.parentNode.parentNode;//父节点
        if(!addrowdirect) {
            var row = table.insertRow(obj.parentNode.parentNode.rowIndex);
        } else {
            var row = table.insertRow(obj.parentNode.parentNode.rowIndex + 1);
        }
        var typedata = rowtypedata[type];
        console.log(row);
        for(var i = 0; i <= typedata.length - 1; i++) {
            var cell = row.insertCell(i);//插入一个空的 <td> 元素
            console.log(i);
            cell.colSpan = typedata[i][0];//横跨列数
            var tmp = typedata[i][2];
            if(typedata[i][3]) {
                cell.className = typedata[i][4];
            }
            tmp = tmp.replace(/\{(n)\}/g, function($1) {return addrowkey;});
            tmp = tmp.replace(/\{(\d+)\}/g, function($1, $2) {return addrow.arguments[parseInt($2) + 1];});
            cell.innerHTML = tmp;
        }
        addrowkey ++;
        addrowdirect = 0;
    }
    var rowtypedata = [
        [
            [1,'<input type="text" name="test1" class="px"/>'],
            [1,'<input type="text" name="test2" class="px"/>'],
        ],
    ]
</script>
    <form name="createform" method="post" autocomplete="off" action="">
        <table class="dt mbw" id="client">
            <tr><th class="o">列表1</th><th>列表2</th></tr>
            <tr>
                <td>
                    <input type="text" name="test1" class="px"/>
                </td>
                <td>
                    <input type="text" name="test2" class="px"/>
                </td>
            </tr>
            <tr><td><a class="addtr" onclick="addrow(this, 0)" href="javascript:;">增加</a></td><td></td></tr>
        </table>
        <div class="pbm">
            <button value="true" class="pn pnc" name="pluginsbt" type="submit"><strong>提 交</strong></button>
        </div>
    </form>
</body>
</html>


文章版权及转载声明

本文作者:符文浩 网址:http://blog.fuwenhao.com/post/426.html 发布于 2021-03-21
文章转载或复制请以超链接形式并注明出处。

发表评论

快捷回复:

评论列表 (暂无评论,859人围观)参与讨论

还没有评论,来说两句吧...

取消
微信二维码
微信二维码
支付宝二维码