在div中动态输入input标签，并且给标签设置属性和属性值

Java-请多指教

已于 2023-05-18 13:39:41 修改

阅读量734

点赞数

分类专栏：工作学习文章标签： html javascript servlet

于 2023-05-15 14:02:38 首次发布

本文链接：https://blog.csdn.net/wuzj1314/article/details/130683081

版权

工作学习专栏收录该内容

31 篇文章 1 订阅

订阅专栏

需求：

在div中动态输入input标签，并且给标签设置属性和属性值

然后根据设置的属性值去判断是否需要显示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./jquery.min.js"></script>

<body>

    <tr>
        <td class="inputTitle"><span style="color:red">*</span>刊发平台</td>
        <td colspan="7">
            <div id="mediaDiv"></div>
        </td>
    </tr>
    <script type="text/template" id="mediaTemplate">
        <input type="checkbox" name="mediaId" value=""  title="">
    </script>

    <input type="button" onclick="add()">加
    <input type="button" onclick="isshow()">是否显示
</body>


<script>
    function add() {
        var data = [1, 2, 3, 4];
        var doc = $("#mediaDiv");
        $.each(data, function (index, obj) {
            console.log($("#mediaTemplate").html());// <input type="checkbox" name="mediaId" value=""  title="">
            
            var temp = $($("#mediaTemplate").html());
            temp.attr("value", "哈哈哈哈" + obj);
            temp.attr("title", "标题" + obj);


            doc.append(temp);
            if (temp.val() == "哈哈哈哈2") {
                temp.attr("checked", true)
                doc.append(temp);
            }
        })
    }

    function isshow() {
        var isshow = false;
        $("#mediaDiv input:checkbox").each(function (index, item) {
            if (item.checked) {
                isshow = true;
                return false;
            }
        });

        if (isshow) {
            console.log("显示");
        }else{
            console.log("不显示");
        }
    }


</script>

</html>

开始

点击加

点击是否显示

新的完整的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<script src="./jquery.min.js"></script>
<script>
    function show() {
        if(checkInput()&&checkTextarea()){
            console.log("过过过");
        }else{
            console.log("不过不过，有没填的");
        }

    }

    function checkInput() {
        //检查input框
        var Inputs = $('#extable').find("input");
        console.log("input标签个数-----" + Inputs.length);//获取的input个数
        for (var i = 0; i < Inputs.length; i++) {//遍历
            var ishas = Inputs[i].getAttribute('data-isNotEmpty');
            if (ishas == "true") { //是必填
                console.log("第" + (i+1)  + "个必填");
                var textValue = $(Inputs[i]).val().trim();
                if (textValue == undefined || textValue === '') {
                    alert("扩展字段必填项不能为空！");
                    return false;
                }
            }
          
        }
        return true;
    }

    function checkTextarea() {
        var textareas = $('#extable').find("textarea");
        console.log("textareas标签个数-----" + textareas.length);//获取的input个数
        for (var i = 0; i < textareas.length; i++) {//遍历
            var ishas = textareas[i].getAttribute('data-isNotEmpty');
            if (ishas == "true") { //是必填
                console.log("第" + (i+1)  + "个必填");
                var textareasValue = $(textareas[i]).val().trim();
                if (textareasValue == undefined || textareasValue === '') {
                    alert("扩展字段必填项不能为空！");
                    return false;
                }

            }
           
        }
        return true;

    }

</script>




<body>
    <tr id="extendFieldTr">
        <td><span class="titlenamespan">扩展字段</span></td>
        <td colspan=2>
            <table id="extable" border=0 cellpadding=0 cellspacing=2 style="margin-left:-2px">
                <tr>
                    <td class=listCaption nowrap align="center">
                        <div class='ueexftdtitle' title="摄影">
                            <font color="ff6600" style="margin-right: 8px">*</font>摄影
                        </div>
                    </td>
                    <td width=171 style='width:171px' nowrap align="center">
                        <input type=text name='sy' class='input_css' style='width:170px;' data-isNotEmpty="true"
                            value=''>
                    </td>
                    <td class=listCaption nowrap align="center">
                        <div class='ueexftdtitle' title="摄像">摄像</div>
                    </td>
                    <td width=171 nowrap align="center">
                        <input type=text name='sx' class='input_css' style='width:170px;' data-isNotEmpty="false"
                            value=''>
                    </td>
                </tr>
                <tr>
                    <td class=listCaption nowrap align="center">
                        <div class='ueexftdtitle' title="日期">
                            <font color="ff6600" style="margin-right: 8px">*</font>日期
                        </div>
                    </td>
                    <td width=171 style='width:171px' nowrap align="center">
                        <input type=text   name='riqi' class='input_css' style='width:170px;' data-isNotEmpty="true" value='' >
                    </td>
                </tr>
                <tr>
                    <td class=listCaption nowrap align="center">
                        <div class='ueexftdtitle' title="文本框">
                            <font color="ff6600" style="margin-right: 8px">*</font>文本框
                        </div>
                    </td>
                    <td class='listContent' colspan='3' align="center">
                        <textarea name='wenbenkuang' class='editarea' id="textarea"
                            style='width:100%;height:80px;border:1px solid #d2eec6;' data-isNotEmpty="true"></textarea>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <input type="button" onclick="show()">提交
</body>

</html>