從字段1動態更新表格字段

-1

<!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>

我想從第一個給定的輸入動態地更新第二個表單字段。我使用flatUI和bootstrap css文件。但我無法更改生成的文本字段類型，如引導程序或平面UI，它顯示了一個基本的文本字段！請有人幫我解決這個問題。謝謝從字段1動態更新表格字段

<!-- 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>

來源

2014-12-30 user2218797

確保關閉所有腳本標記.'' script src =「../ dist/js/flat-ui-pro.js」>'它沒有關閉 –

正如你已經在你的代碼中包含了jQuery的，可以追加新的領域與預先定義的CSS類爲：

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

jQuery是容易調試，然後香草的JavaScript。

希望這可能有幫助！

來源

2014-12-30 06:49:48

您能解釋一下我的問題更具體嗎...生成的文本字段是基本的，我需要類似於bootstrap或FlatUI的文本字段。 – user2218797

Bootstrap和像flat-ui css這樣的類似的庫定義類來改變元素的行爲。所以基本上你的新元素在定義或追加時必須具有該引導類。 –

從字段1動態更新表格字段

回答

相關問題