野生大熊猫

Discuz JS 函数addrow解析
导语大家一定见过这个功能,这个添加主导航这个在实际的开发插件中,可以让用户在添加数据的时候感到特别方便。使用这边专...
扫描右侧二维码阅读全文
20
2018/01

Discuz JS 函数addrow解析

QQ截图20180120220335.jpg

导语

大家一定见过这个功能,这个添加主导航这个在实际的开发插件中,可以让用户在添加数据的时候感到特别方便。

使用

这边专门做了个demo出来,原来函数来自于static\js\common.js这个文件中。在开发过程中可以引入这个文件调用addrow函数即可。并且不要忘记定义rowtypedata的值。

代码

<!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>

demo地址点击查看

Last modification:January 20th, 2018 at 10:40 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment