問題與動態和文本放置

我想要做的是當我點擊提交按鈕它把所有的名字和大名字的名字放入div的contactcard1，當他們點擊看到它的描述它切換到contactcard2，我需要描述在contactcard2中顯示的信息，以及每次信息在左側提交時，它會在頁面上動態創建一個與聯繫人1和2框相同的新框。我已經完成了大部分工作，但似乎無法讓這些功能正常工作。我確實打開了document.on，因此我可以使用這些功能。但是，將適當的任何幫助來解決這個問題。問題與動態和文本放置

我的HTML

!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" type="text/css" href="style.css"></style> 
    <script type="text/javascript" src='http://code.jquery.com/jquery-1.10.2.min.js'></script> 
    <script type="text/javascript"> 


      $(document).ready(function() { 
     var table = $('#tabletop'); 
     $('.button').click(function() { 
     var row = tabletop.insertRow(); 
     ['1stname', '2ndname', '3rdname', '4thname'].forEach(function(elementId) { 
      var cell = row.insertCell(); 
      cell.innerHTML = document.getElementById(elementId).value; 
     }); 
     }); 
    }); 

     function switchVisible() { 
    if (document.getElementById('contactcard1') !== undefined) { 

     if (document.getElementById('contactcard1').style.display == 'block') { 
      document.getElementById('contactcard1').style.display = 'none'; 
      document.getElementById('contactcard2').style.display = 'block'; 
     } else { 
      document.getElementById('contactcard1').style.display = 'block'; 
      document.getElementById('contactcard2').style.display = 'none'; 
     } 
    } 
} 

     $('button').append('#maindiv') 
     $(document).on() 

    </script> 


</head> 
<body> 
    <div id='wrapper'> 
     <div id='container1'></div> 

     <div id=maindiv> 
     <div id='container2'> 

      <form id='form1'> 
       First name:<br> 
       <input id='1stname' type="text" name="firstname" value="First Name"> 
       <br> Last name:<br> 
       <input id='2ndname' type="text" name="lastname" value="Last Name"> 
       <br> Description:<br> 
       <input id='3rdname' type="text" name="description" value="Description"> 


      </form> 

       <button class='button'>Submit</button> 
     </div> 
     <div id='container3'> 
     <div id='contactcard1'> 
      <table id='tabletop'> 
      <tr> 
       <th id='first'>First Name</th> 
       <th id='last'>Last Name</th> 
       <input id="Button1" type="button" value="See My Description" onclick="javascript:switchVisible();" /> 



      </tr> 
      </table> 
      </div> 


     <div id='contactcard2'> 
      <table id='tabletop1'> 
      <tr> 

       <th id='description'>Description</th> 

      </tr> 
      </table> 
      </div> 
    </div> 
     </div> 
    </div> 
    </div> 
    </div> 
    </div> 
</body> 
</html> 


MY CSS 

* 

#wrapper{ 

    width: 800px; 
    margin: 0 auto; 
    overflow: hidden; 
    border: 1px solid black ; 
} 

#container1{ 

    width: 800px; 
    height: 100px; 
    display: inline-block; 
    border: 1px solid black ; 
} 

#container2{ 

    width: 200px; 
    height: 500px; 
    display: inline-block; 
    border: 1px solid black ; 
    margin: 0 auto; 
} 
#container3{ 

    width: 580px; 
    height: 500px; 
    display: inline-block; 
    border: 1px solid black ; 
    vertical-align: top; 
} 

#form1{ 

    margin-top: 100px; 
} 

#contactcard1{ 

    width: 350px; 
    height: 150px; 
    display: inline-block; 
    border: 1px solid black; 
    margin-left: 100px; 

} 
#contactcard2{ 

    width: 350px; 
    height: 150px; 
    display: none; 
    border: 1px solid black; 
    margin-left: 100px; 

} 

#button1{ 

    vertical-align: bottom; 
}

來源

2017-03-02 David Hollenbeck

有很多的事情，你需要做。我爲你創作了一個小提琴作爲工作版本。如果你不明白，請看看並告訴我。 https://jsfiddle.net/0433Lo2u/

$(document).ready(function() { 
document.getElementById('contactcard1').style.display = 'block'; 

     $('.button').click(function() { 
     var row = undefined; 
     if (document.getElementById('contactcard1').style.display == 'block') { 

     row = tabletop.insertRow(); 
     }else{ 

     row = tabletop1.insertRow(); 
     } 
     ['1stname', '2ndname', '3rdname'].forEach(function(elementId) { 
      var cell = row.insertCell(); 
      cell.innerHTML = document.getElementById(elementId).value; 
     }); 
     }); 

$('#Button1').click(function(){ 
    if (document.getElementById('contactcard1') !== undefined) { 

     if (document.getElementById('contactcard1').style.display == 'block') { 
      document.getElementById('contactcard1').style.display = 'none'; 
      document.getElementById('contactcard2').style.display = 'block'; 
     } else { 
      document.getElementById('contactcard1').style.display = 'block'; 
      document.getElementById('contactcard2').style.display = 'none'; 
     } 
    } 
}) 
    });

來源

2017-03-03 00:07:12

你沒有鏈接的jsfiddle –

我我的回答 –

泰的更新讓我看看 –

問題與動態和文本放置

回答

相關問題