Javascript 从字段1动态更新表单字段创建联盟函数addFields（）{ var number=document.getElementById（“成员”）.value； var container=document.getElementById（“容器”）； while（container.hasChildNodes（））{ container.removeChild（container.lastChild）； } 对于（i=0；i 请输入以下字段队伍数目_Javascript_Jquery_Html_Twitter Bootstrap_Flatui

Javascript 从字段1动态更新表单字段创建联盟函数addFields（）{ var number=document.getElementById（“成员”）.value； var container=document.getElementById（“容器”）； while（container.hasChildNodes（））{ container.removeChild（container.lastChild）； } 对于（i=0；i 请输入以下字段队伍数目

javascript jquery html twitter-bootstrap

Javascript 从字段1动态更新表单字段创建联盟函数addFields（）{ var number=document.getElementById（“成员”）.value； var container=document.getElementById（“容器”）； while（container.hasChildNodes（））{ container.removeChild（container.lastChild）； } 对于（i=0；i 请输入以下字段队伍数目,javascript,jquery,html,twitter-bootstrap,flatui,Javascript,Jquery,Html,Twitter Bootstrap,Flatui,我正在尝试从第一个给定的输入动态更新第二个表单字段。我正在使用flatUI和bootstrap css文件。但是我无法更改生成的文本字段类型，如bootstrap或flat UI，它将显示一个基本文本字段！！请有人帮我解决此问题。谢谢 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Create League</titl

我正在尝试从第一个给定的输入动态更新第二个表单字段。我正在使用flatUI和bootstrap css文件。但是我无法更改生成的文本字段类型，如bootstrap或flat UI，它将显示一个基本文本字段！！请有人帮我解决此问题。谢谢

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Create League</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Loading Bootstrap -->
    <link href="../dist/css/vendor/bootstrap.min.css" rel="stylesheet">

    <!-- Loading Flat UI Pro -->
    <link href="../dist/css/flat-ui-pro.css" rel="stylesheet">


    <link rel="shortcut icon" href="img/favicon.ico">


    <script type='text/javascript'>
        function addFields(){
             var number = document.getElementById("member").value;
             var container = document.getElementById("container");

            while (container.hasChildNodes()) {
                container.removeChild(container.lastChild);
            }
            for (i=0;i<number;i++){

                container.appendChild(document.createTextNode("Team " + (i+1) +" Name"));

                var input = document.createElement("input");
                var newIn = '<input class="col-md-6"';
                input.type = "text";
                input.name = "member" + i;
                input.class="form-control";
                input.placeholder="Please enter the team name";

                container.appendChild(input);

                container.appendChild(document.createElement("br"));
            }
        }
    </script>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="js/vendor/html5shiv.js"></script>
      <script src="js/vendor/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

  <div class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" 
                data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a class="navbar-brand" align="left" href="#topContainer">
                <img style="max-width:100px;margin-top:-7px;"
                src="img/logo.png"  /></a>              
            </div>  
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">             
                    <li class="active"><a href="">Home</a></li>
                    <li><a href="#CMContainer">Recent Matches</a></li>
                </ul>

            </div>
        </div>
    </div>
    <div class="container contentContainer">
    <div class="row">
    <div class="col-md-6">
    <br>
    <br>
    <h4>Please enter the fields below</h3>
    <div class="form-group">
    <label for="noofteams">Number of Teams</label>
   <input type="text" class="form-control" id="member" name="member" value=""placeholder="Enter number of teams"><br />
    <a href="#" id="filldetails" class="btn btn-default" onclick="addFields()">OK</a>
    <div id="container"/>

    </div>
    </div>
    </div>
    </div>


$（“.contentContainer”）.css（“最小高度”，$（窗口）.height（））；

由于您已经在代码中包含jQuery，您可以使用预定义的CSS类附加新字段，如下所示：

    <!-- jQuery (necessary for Flat UI's JavaScript plugins) -->
    <script src="../dist/js/vendor/jquery.min.js"></script>
    <script src="../dist/js/vendor/video.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="../dist/js/flat-ui-pro.js">
    <script>
    $(".contentContainer").css("min-height", $(window).height());
    </script>

  </body>
</html>

$（'.container'）。追加（''）；

jQuery比普通javascript更容易调试

希望这可能会有所帮助！

确保关闭所有脚本标记。

它没有关闭。您可以针对我的问题进行更具体的解释…生成的文本字段是基本的，我需要类似于bootstrap或FlatUI的文本字段。bootstrap和类似的库（如FlatUI css）定义类来更改元素的行为。所以基本上在定义或附加新元素时，新元素必须具有该引导类。

$('.container').append('<input class="form-control" type="text" placeholder="something"/>');