Question

我想要做的是当我点击提交按钮时，它将所有名称和名字以大文本放入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;
}

Answer 1

你需要做很多事情。我为你创造了一个小提琴，作为一个工作版本。看看，如果你不明白，请告诉我。 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';
        }
    }
})
    });

动态和文本放置问题

1 个答案: