Javascript Jquery和表_Javascript_Jquery_Html Table

Javascript Jquery和表

javascript jquery

Javascript Jquery和表,javascript,jquery,html-table,Javascript,Jquery,Html Table,我有一个HTML表单，我从中提取数据，并使用jQuery收集表单数据并将其放在下面。但是，当我单击按钮时，该函数可以工作，但我无法使它在表中的每个条目都位于单独的行中。它只是堆叠直到行满，然后转到下一行。我希望能够编辑此文件，使其在彼此下面对齐。这是我的密码： <html> <head> <title>jQuery</title> <link rel="stylesheet" type="text/css" h

我有一个HTML表单，我从中提取数据，并使用jQuery收集表单数据并将其放在下面。但是，当我单击按钮时，该函数可以工作，但我无法使它在表中的每个条目都位于单独的行中。它只是堆叠直到行满，然后转到下一行。我希望能够编辑此文件，使其在彼此下面对齐。这是我的密码：

<html>
<head>
    <title>jQuery</title>       
     <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript"             src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">             
            $(document).ready(function(){
             $('#button').click(function(){
            var row1 = document.getElementById("1stname").value;
            var row2 = document.getElementById("2ndname").value;
            var row3 = document.getElementById("3rdname").value;
            var row4 = document.getElementById("4thname").value;
            $('#row1 ').append(row1, row2, row3, row4) ;                
            });
        });
    </script>
</head>
<body >
<div id='wrapper'>
<div id="col">
        <table id='tabletop'>
          <tr>
            <th id='first'>First Name</th>
            <th id='last'>Last Name</th> 
            <th id='email'>Email Address</th>
            <th id='contact'>Contact #</th>
          </tr>
          </table>
          </div>
        <p id="row1"></p>           
 </div>

 <div id=formdiv>
  <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>
  Email Address:<br>
  <input id='3rdname' type="text" name="emailaddress" value="Email Address">
  <br>
  Contact No:<br>
  <input id='4thname' type="text" name="contactno" value="Phone #">
  <br><br>

</form> 
    <input id="button" type="submit" value="Add User">
</div>

</div>
</body>
</html>

尝试添加一个元素，该元素可以在一个CSS类中使用，CSS类可以一个接一个地堆积元素，如下所示：

<script type="text/javascript">
            $(document).ready(function(){
             $('#button').click(function(){
            var row1 = $('<div class="clsBlk"/>').text(document.getElementById("1stname").value);
            var row2 = $('<div class="clsBlk"/>').text(document.getElementById("2ndname").value);
            var row3 = $('<div class="clsBlk"/>').text(document.getElementById("3rdname").value);
            var row4 = $('<div class="clsBlk"/>').text(document.getElementById("4thname").value);
            $('#row1 ').append(row1, row2, row3, row4) ;
            });
            });
    </script>
<style type="text/css">
 .clsBlk { display:block; }
</style>


$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
var row1=$（''）.text（document.getElementById（“1stname”）.value）；
var row2=$（''）.text（document.getElementById（“2ndname”）.value）；
var row3=$（''）.text（document.getElementById（“3rdname”）.value）；
var row4=$（''）.text（document.getElementById（“4thname”）.value）；
$（“#第1行”）.append（第1行、第2行、第3行、第4行）；
});
});
.clsBlk{display:block；}

使用和将行和单元格添加到表中

下面的代码还用于迭代元素的ID，并为要添加的行中的每个元素添加一个单元格

$（文档）.ready（函数（）{
变量表=$（“#桌面”）；
$（“#按钮”）。单击（函数（）{
var row=tabletop.insertRow（）；
['1stname'，'2ndname'，'3rdname'，'4thname'].forEach（函数（elementId）{
var cell=row.insertCell（）；
cell.innerHTML=document.getElementById（elementId）.value；
});
});
});
*{
边际：0px；
填充：0px；
}
#包装纸{
宽度：490px；
边框：1px纯黑；
}
#上校{
边框：1px纯绿色；
显示：内联块；
}
#可乐{
边框：1px纯黑；
显示：内联块；
}
#桌面{
边框：1px纯红；
宽度：490px；
显示：块；
}
#表11-1{
显示：内联块；
}
#formdiv{
显示：内联块；
}

名字
姓
电子邮件地址
接触#

名字：


姓氏：


电子邮件地址：


联系电话：




对不起，您说我需要div。如果您运行代码，您可以看到它彼此相邻，默认情况下是。。。所以你不需要在CSS中设置display:block，除非其他样式将其设置为不同的值……是的，Sam Onela是对的，但我不知道其他类会影响这些div，所以可以在它们上指定“display:block；”。非常感谢。
<script type="text/javascript">
            $(document).ready(function(){
             $('#button').click(function(){
            var row1 = $('<div class="clsBlk"/>').text(document.getElementById("1stname").value);
            var row2 = $('<div class="clsBlk"/>').text(document.getElementById("2ndname").value);
            var row3 = $('<div class="clsBlk"/>').text(document.getElementById("3rdname").value);
            var row4 = $('<div class="clsBlk"/>').text(document.getElementById("4thname").value);
            $('#row1 ').append(row1, row2, row3, row4) ;
            });
            });
    </script>
<style type="text/css">
 .clsBlk { display:block; }
</style>