Javascript 动态和文本放置问题_Javascript_Jquery

Javascript 动态和文本放置问题

javascript jquery

Javascript 动态和文本放置问题,javascript,jquery,Javascript,Jquery,我想做的是，当我点击submit按钮时，它会将所有姓名和名字以大文本形式放入div contactcard1，当他们点击see description时，它会切换到contactcard2，我需要在contactcard2中显示描述信息，每次在左侧提交信息时，它都会在页面上动态创建一个新框，该框与联系人1和联系人2框相同。我已经完成了大部分工作，但似乎无法完成这些功能。我确实打开了document.on以便使用这些功能。但在修复这个问题上需要任何帮助我的HTML !DOCTYPE html&g

我想做的是，当我点击submit按钮时，它会将所有姓名和名字以大文本形式放入div contactcard1，当他们点击see description时，它会切换到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;
}

！DOCTYPE html>
$（文档）.ready（函数（）{
变量表=$（“#桌面”）；
$（'.button'）。单击（函数（）{
var row=tabletop.insertRow（）；
['1stname'，'2ndname'，'3rdname'，'4thname'].forEach（函数（elementId）{
var cell=row.insertCell（）；
cell.innerHTML=document.getElementById（elementId）.value；
});
});
});
函数switchVisible（）{
if（document.getElementById（'contactcard1'）！==未定义）{
if（document.getElementById（'contactcard1'）。style.display=='block'）{
document.getElementById（'contactcard1'）。style.display='none'；
document.getElementById（'contactcard2'）。style.display='block'；
}否则{
document.getElementById（'contactcard1'）。style.display='block'；
document.getElementById（'contactcard2'）.style.display='none'；
}
}
}
$（“按钮”）.append（“#maindiv”）
$（文档）.on（）
名字：


姓氏：


说明：

提交
名字
姓
描述
我的CSS
*
#包装纸{
宽度：800px；
保证金：0自动；
溢出：隐藏；
边框：1px纯黑；
}
#集装箱1{
宽度：800px；
高度：100px；
显示：内联块；
边框：1px纯黑；
}
#集装箱2{
宽度：200px；
高度：500px；
显示：内联块；
边框：1px纯黑；
保证金：0自动；
}
#集装箱3{
宽度：580px；
高度：500px；
显示：内联块；
边框：1px纯黑；
垂直对齐：顶部；
}
#表格1{
边缘顶部：100px；
}
#名片1{
宽度：350px；
高度：150像素；
显示：内联块；
边框：1px纯黑；
左边距：100px；
}
#名片2{
宽度：350px；
高度：150像素；
显示：无；
边框：1px纯黑；
左边距：100px；
}
#按钮1{
垂直对齐：底部对齐；
}

在这里，您需要做很多事情。我为你制作了一把小提琴作为工作版本。看一看，如果你不明白，请告诉我。

你没有链接jsfiddle尝试点击按钮，当你点击

description

按钮时，你的代码不起作用。我看到你把我的代码清理了很多。谢谢你，你能给我指出正确的方向来修复其余的问题吗。是的，我仍在努力将文本放到第二个框中进行描述。只要单击它即可查看。是的，刚刚测试过，它确实起作用了，正如你在原始问题中所期望的那样。你想在这里修复什么？不，我正在尝试使用提交按钮克隆右边的框和功能，并用信息附加新框。我需要将表单描述移动到2联系人卡。

$(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';
        }
    }
})
    });