zoukankan      html  css  js  c++  java
  • 动态添加文本框并获取文本框的值

    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/jquery-1.7.2.js"></script>
        <script src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript">
            function btnadd() {
                //点击添加文本框(这里面我用了两个图片作为添加删除的控件)
                $("thead").append("<tr><td>文本1:<input id="txtOne" /></td ><td>文本2:<input id="txtTwo" /></td><td>文本3:<input id="txtThree" /></td><td> <a class="remove"><img id="delete" src="Images/cross.png" /></a></td></tr>");
                $(".remove").bind("click", function () {
                    //删除文本框 
    
                    $(this).parents("tr").remove();
                });
            }
    
            function btnValue() {
                var arr = [];
                var textNum = $("table thead tr").children("td").find("input").length;
                //循环获取文本框的值 
    
                for (var i = 0; i < textNum; i++) {
                    var text = $("table thead tr").children("td").find("input").eq(i).val();
                    arr.push(text);
                }
                var json = JSON.stringify(arr);
                alert(json);
            }
        </script>
    </head>
    <body>
        <a class="insert" onclick="btnadd()"><img id="add" src="Images/event.png" /></a>
        <table>
            <thead>
            </thead>
        </table>
        <input type="button" value="获取值" onclick="btnValue()" />
    </body>
    </html>
  • 相关阅读:
    软工实践
    福大软工 · 最终作业
    福大软工 · 第十二次作业
    Beta冲刺(7/7)
    Beta冲刺(5/7)
    Beta 冲刺(6/7)
    Beta冲刺 (4/7)
    Beta冲刺 (3/7)
    Beta冲刺 (2/7)
    Beta 冲刺(1/7)
  • 原文地址:https://www.cnblogs.com/-zzc/p/9967387.html
Copyright © 2011-2022 走看看