input弹出div之后该怎么办,求大神指导

我给input绑定了一个onblur事件做了一个用layer插件的弹窗,接下来是用文本框的value值绑定li,li是动态生成的,li下的input框什么的也是动态生成的,我想知道这些该怎么写,思路是什么,求大神指教,十分感激。

3个回答

在input绑定的onblur事件中加入你的li input 标签内容,或者你可以先写好你的弹窗内容,把他们隐藏起来,当input失去焦点触发事件时,把你的弹窗内容秀出来,如果弹窗内容需要绑定文本框内容,可以在触发事件时获取文本框内容,赋值给弹窗,在把弹窗秀出来

qq_36330228
-小龙人 回复qq_38221992: 谢谢采纳哈,感觉并没有帮助到你,因为你使用的插件,我不是很熟悉,一直在说我自己看法
一年多之前 回复
qq_36330228
-小龙人 回复qq_38221992: 可以不用这个插件,简单点做,可以先写个div将它隐藏起来,z-index属性设置比底层div大点,然后在js中去判断你需要几个li几个table,把这些绑定那个div,在将div显示出来就是你要的效果了,你也可以看看js的模态窗,也可以实现的
一年多之前 回复
qq_38221992
qq_38221992 回复qq_36330228: li的数量是根据input 框决定的 input输入3就有3个li table的话是动态的 有一个隐藏的模板,不用从文本框中获取数据,每个动态生成的li下面都是一个动态生成的table
一年多之前 回复
qq_36330228
-小龙人 回复qq_38221992: 你这里使用layer插件实现的弹窗,我也没看太明白,你的具体实现是不是,填写完文本框内容,鼠标移动后,会有一个弹窗,弹窗内容根据文本框内容产生li标签,每个li中包含一个table,这里面的li个数是有限吗,table需要从文本框中获取什么数据吗
一年多之前 回复
qq_38221992
qq_38221992 回复qq_36330228: 下边是我写的js
一年多之前 回复
qq_36330228
-小龙人 回复qq_38221992: 可以贴出来你的代码吗
一年多之前 回复
qq_38221992
qq_38221992 回复qq_36330228: 但是动态生成的li上要的效果是每个li都绑定一个动态生成的table
一年多之前 回复
qq_36330228
-小龙人 回复qq_38221992: 你可以自己写table不要用模版,onblur事件是可以触发的
一年多之前 回复
qq_38221992
qq_38221992 table都有一个模板,然后动态生成得,不用按钮进行添加得话,直接用onclick绑定不行, 单击一次出一个。。。。。。
一年多之前 回复
qq_38221992
qq_38221992 我现在是直接在js里面用for循环判断input框得值 如果i小于input得值就循环
一年多之前 回复
qq_38221992
qq_38221992 回复qq_36330228: 嗯 如果input框输入3就动态获取3个li 每个li绑定一个动态生成得table
一年多之前 回复
qq_36330228
-小龙人 回复qq_38221992: 是不是针对input文本框中的内容不同,弹窗的内容不同,这种情况如果你是很简单的数据处理,完全可以在js中拿到文本框的内容,对这个内容进行判断,分别给不同的弹窗内容,如果数据量大复杂,可以使用ajax去异步请求完成弹窗内容
一年多之前 回复
qq_38221992
qq_38221992 还有就是下面的内容也是动态的。
一年多之前 回复
qq_38221992
qq_38221992 那如果动态添加的li还要绑定下边的内容呢
一年多之前 回复

var splitNumber=$("#splitNumber").val(); //专题数值
var splitId1=document.getElementById("456"); //获取div的id
var economicProject=document.getElementById("economicProject").val; //table中的一个tr
splitId1.style.display="block";
document.getElementById('ss').innerHTML = "";
$('#ss').html("");
if(splitNumber>=2){
economicProject="";
layer.open({
type: 1
,title: false//不显示标题栏 title : false/标题
,closeBtn: true
,area:'[1000px,auto];'
,shade: 0.8
,btn: ['确认','取消','清空']
,id: 'LAY_layuipro' //设定一个id,防止重复弹出
,resize: false
,btnAlign: 'c'
,moveType: 1 //拖拽模式,0或者1
,content: $("#123")
,success: function(layero){
var btn = layero.find('.layui-layer-btn');
btn.find('.layui-layer-btn0').attr({
href: 'http://www.baidu.com/'
,target: '_blank'
});
}
});
} else{
div.style.display="none";
}
var flag=true
if(flag){}
for(i =0; i /* $("#ss").append("专题信息"); */
$("#ss").append("专题信息");

}
$('#ss li a').click(function(){
alert("333");
var tableMainId = "splitId1";//需动态添加的table的Id
var templateTrId = "split1";//需复制的模板行的Id
var autoTrId = templateTrId;//新创建的行的Id

                var tab = document.getElementById(tableMainId);//动态添加的table
                var len = tab.rows.length;//table的总行数
                var newTrId = autoTrId + "_" + (len-2);//新行的id
                // clone :复制templateTr并赋值newTrId
                var newTr = $("#"+templateTrId).clone(true).attr("id",newTrId);//复制隐藏模板那一行
                $("#"+tableMainId+" tr").eq(len-2).before(newTr);//添加至table倒数第二行的前面
                $("#"+newTrId).css("display", "");//修改新添加行为显示,因模板行为隐藏
                $("#"+newTrId).find("span").eq(0).html((len-2));//序号
                /******************更新input的id开始********************/
                var inLength = $("#" + newTrId).find("input").length; // 获取新clone出的tr中input的数量
                for (var i = 0; i < inLength; i++) {
                    var newInId = $("#" + newTrId).find("input").eq(i).attr("id") + "_" + (len-2);
                    $("#" + newTrId).find("input").eq(i).attr("id", newInId);// 逐个遍历, 更新所有input中的Id
                }
                /******************更新input的id结束********************/
                /******************更新textarea的id开始********************/
                var tLength = $("#" + newTrId).find("textarea").length; // 获取新clone出的tr中textarea的数量
                for (var i = 0; i < tLength; i++) {
                    var newTId = $("#" + newTrId).find("textarea").eq(i).attr("id") + "_" + (len-2);
                    $("#" + newTrId).find("textarea").eq(i).attr("id", newTId);// 逐个遍历, 更新所有textarea中的Id
                }
                /******************更新textarea的id结束********************/
                /******************更新select的id开始********************/
                var sLength = $("#" + newTrId).find("select").length; // 获取新clone出的tr中select的数量
                for (var i = 0; i < sLength; i++) {
                    var newSId = $("#" + newTrId).find("select").eq(i).attr("id") + "_" + (len-2);
                    $("#" + newTrId).find("select").eq(i).attr("id", newSId);// 逐个遍历, 更新所有select中的Id
                }
            });
    }

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问