Html前端标签内值替换渲染

最新推荐文章于 2024-04-23 16:26:38 发布

会飞的哈士奇

最新推荐文章于 2024-04-23 16:26:38 发布

阅读量103

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/dongyan3595/article/details/133928457

版权

<div class="layui-row" id="optionDataDiv"></div>
<script type="text/html" id="optionTemplate">
    <div class="layui-row" style="margin-left: 20px;margin-top: 5px">
        <div class="layui-col-xs4">
            <input type="text" name="optionKey" class="layui-input" value="[optionKeyValue]" placeholder="选项名">
        </div>
        <div class="layui-col-xs4">
            <input type="text" name="optionValue" class="layui-input" value="[optionValueValue]" placeholder="选项值">
        </div>
        <div class="layui-col-xs4">
            <button type="button" class="layui-btn layui-btn-primary optionRemove"><i class="layui-icon"></i></button>
        </div>
    </div>
</script>

    function optionTemplate(optionData){
            var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
            var  template = document.getElementById("optionTemplate").innerHTML;
            var html = template.replace(reg, function (node, key) {
                // key为每一个[xxx]中的xxx
                if(typeof(optionData) == "undefined"){
                    return { 'optionKeyValue': '选项名', 'optionValueValue': '选项值'}[key];
                }else{
                    return { 'optionKeyValue': optionData.name, 'optionValueValue': optionData.value}[key];
                }
            });
            $("#optionDataDiv").append(html)
    }

    var optionData = {"name": "选项1", "value": "1"};
    optionTemplate(optionData);