表格里面使用js添加select标签，并用js动态添加slected标签里面option

最新推荐文章于 2023-02-02 15:51:26 发布

林恒的金手指

最新推荐文章于 2023-02-02 15:51:26 发布

阅读量2.7k

点赞数

分类专栏：前端笔记文章标签： select option table动态添加select

本文链接：https://blog.csdn.net/skzwd2016/article/details/100095773

版权

前端笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近做项目的UI时，遇到这样的需求：

1.动态添加表格的行数，并将值或取出来；

2.在动态添加的表格中，动态加入select标签；

3.动态加入select标签内的option值；

4.初始化复选框的选中状态；

以上就是大概的需求，笔者初学者，而且是偏向后端研发，对前端的框架了解不多，研究了一天左右，最终通过JQuery实现，如有错误，望指教！

以下代码仅供参考：

HTML代码：

<body>
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title" style="padding-top: 10px;">                       
                    </div>
                    <div class="ibox-title" style="padding-top: 10px;">
                        <div class="ibox-tools">
                                <button id="addTBtn" label="添加" onclick="addTBtnClick('tableId', -1)" />
                                <button id="deleteTBtn" label="删除" onclick="deleteTBtnClick" />
                        </div>
                    </div>
                    <div class="ibox-content">
                        <form>
                            <div class="grid-tab-wrapper">
                            <table id="tableId" class="table table-hover table-striped table-bordered" style="table-                     layout:fixed;width:100%;background-color:#f5f5f5">
                                 <thead>
                                     <tr>
                                         <th width="80" style="text-align: center;"><input id="allCkb" name="allCkb" type="checkbox" onclick="allCheck"></th>
                                         <th width="130" style="text-align: center">下拉框</th>
                                         <th width="130" style="text-align: center">复选框</th>               
                                     </tr>
                                 </thead>
                                 <tbody id="tbody">
                                </tbody>
                            </table>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

js代码：

<script type="text/javascript">
	
    //动态添加表格
    function addTr(tableId, row, trHtml) {
        var udcHtml = '';
        //从后台获取下拉框的值
        var udcValueList = JSON.parse('${udcValueList}');
        //动态设置option值
        for(var i = 0 ; i<udcValueList.length ; i++){
            udcHtml +="<option datasetId='"+udcValueList[i].udcValue+"'value='"+udcValueList[i].udcValue+"'>"+udcValueList[i].udcValue+"</option>";
        }
        //获取所在的表格行数
        var $tr = $("#" + tableId + " tr").eq(row);
        if ($tr.size() == 0) {
            toastr.error("<st:i18n key='lbl.template.setup.add.tableTr.error'/>");
            return;
        }
        //动态添加行数
        $tr.after(trHtml);
        //给每个下拉框赋值
        $("select[name='columnType']").append(udcHtml);
    }
    
    
    //删除表格
    function delTr(ckb) {
        var ckbs = $("input[name=" + ckb + "]:checked");
        if (ckbs.size() == 0) {
            toastr.error("<st:i18n key='lbl.template.setup.delete.tableTr.error'/>");
            return;
        }
        ckbs.each(function() {
            $(this).parent().parent().remove();
        });
    }
    
    //初始化复选框全选状态
    window.onload = function (){
        var all = document.getElementById ("allCkb");            
        var box = document.getElementsByName('ckb');
        all.onclick = function (){
            for ( var i = 0; i < box.length; i++){
                box[i].checked = this.checked;
            }
        };
        for ( var i = 0; i < box.length; i++){
            box[i].onclick = function (){
                if ( !this.checked ){
                    all.checked = false;
                }
            };
        }
    }


    //添加行数事件
    function addTBtnClick(tableId,row) {
        var trHtml = "";
        trHtml = "<tr>" +
                "<td style=\"text-align: center\"><input type='checkbox' name='ckb'/></td>" +
                "<td><select name='columnType' class='select2 form-control' style='width: 100%'/></select></td>" +
                "<td style=\"text-align: center\"><input type='checkbox' name='notEmptyFlag' value='1' /></td>" +
                "</tr>";
        addTr(tableId, row, trHtml);
    }

    //删除行数事件
    function deleteTBtnClick() {
        delTr('ckb');
    }


    //初始化数据，从后台获取数据
    $(document).ready(function(){
    	//从后台获取的数据，用来初始化列表的
        var testList = JSON.parse('${testList}');
        //获取下拉框的值
        var udcValueList = JSON.parse('${udcValueList}');
        //获取复选框
        var box = document.getElementsByName('notEmptyFlag');
        var udcHtml = '';
        for(var i = 0 ; i<udcValueList.length ; i++){
            udcHtml +="<option datasetId='"+udcValueList[i].udcValue+"'value='"+udcValueList[i].udcValue+"'>"+udcValueList[i].udcValue+"</option>";
        }
        if(testList != null && testList.length > 0)
        {
	        //初始化表格
            for(var i = 0; i < testList.length; i++)
            {
                var validateObj = testList[i];
                var columnType = validateObj.columnType== null ? '' : validateObj.columnType;
                var notEmptyFlag = validateObj.notEmptyFlag== null ? '' : validateObj.notEmptyFlag;
                //给checked字段赋值空，若数据库值为1，则为checked，表明复选框被选中
                var checked = '';
                //后台数据库存的值为1，这表明该复选框被选中
                if(notEmptyFlag == '1')
                {
                    checked = 'checked';
                }
                var html = '';
                html ="<tr>" +
                      "<td style=\"text-align: center\"><input type='checkbox' name='ckb'/></td>" +
                      "<td><select id='columnType_"+i+"' name='columnType' class='select2 form-control' style='width: 100%'/></select></td>" +
                      "<td style=\"text-align: center\"><input type='checkbox' name='notEmptyFlag' value='1'"+checked+"/></td>" +
                      "</tr>";
                $("#tableId tbody").append(html);
                $("#columnType_"+i).append(udcHtml);
                
                //将从后台数据库中获取的下拉框值和option列表的值进行对比，若相等，则付上selected标签
                $("#columnType_"+i+" option").each(function (){
                    var txt = $(this).attr("datasetid");
                    if(columnType == txt){
                         $(this).attr("selected","selected");
                    }
                 
                });
            }
        }
    });

     
    
</script>

自己给自己做的笔记，希望自己加油！一直有人觉得笔者当不了研发，算了，让别人说去吧，笔者努力努力，努力达到研发的水平，然后继续猥琐发育，实现自己的小目标就行，何必管别人呢，又不是为别人而活。

林恒的金手指

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
表格里面使用js添加select标签，并用js动态添加slected标签里面option

最近做项目的UI时，遇到这样的需求：1.动态添加表格的行数，并将值或取出来；2.在动态添加的表格中，动态加入select标签；3.动态加入select标签内的option值；4.初始化复选框的选中状态；以上就是大概的需求，笔者初学者，而且是偏向后端研发，对前端的框架了解不多，研究了一天左右，最终通过JQuery实现，如有错误，望指教！以下代码仅供参考：HTML代码：...
复制链接

扫一扫