Question

我希望该订单表位于地址表的下方，我还希望如果我输入一个新条目，它应该会自动向下增加。

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

  td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

.floatLeft { width: 30%; float: left; }
.floatRight {width: 68%; float: right; }
.container { overflow: visible; }

  </style>
</head>
<body>
<div class="container">
<div class="floatLeft">
<table>
     <tr bgcolor="#778899"><th colspan="2">Customer's Info</th>
    </tr>
  <tr>
        <td>Name</td>
    <td>Madhusudan Somani</td>
  </tr>
    <tr>
        <td>Mobile No.</td>
        <td>8619123706</td>
  </tr>
    <tr>
         <td>Email Id</td>
         <td>madhusudan.croblaze@gmail.com</td>
   </tr>
  <tr>
    <td></td>
  </tr>
 </table>
 </div>

<div class="floatRight">
<table>
<tr bgcolor="#778899"><th class="box4_t">S.No</th>
<th class="box4_t">Product Name</th>
<th class="box4_t">Unit</th>
<th class="box4_t">Price</th>
<th class="box4_t">Quantity</th>
<th class="box4_t">Sub-Total</th></tr>
  <tr>
<td>01.</td>
<td>Potato 3737</td>
<td>1Kg-Rs.26</td>
<td>Rs.26</td>
<td>01</td>
<td>Rs.26</td>
  </tr>

  <tr>
<td>02.</td>
<td>Potato 3737</td>
<td>1Kg-Rs.26</td>
<td>Rs.26</td>
<td>01</td>
<td>Rs.26</td>
  </tr>

  <tr>
<td>03.</td>
<td>Potato 3737</td>
<td>1Kg-Rs.26</td>
<td>Rs.26</td>
<td>01</td>
<td>Rs.26</td>
  </tr>

  <tr>
<td>01.</td>
<td>Potato 3737</td>
<td>1Kg-Rs.26</td>
<td>Rs.26</td>
<td>01</td>
<td>Rs.26</td>
  </tr>

  <tr>
<td>04.</td>
<td>Potato 3737</td>
<td>1Kg-Rs.26</td>
<td>Rs.26</td>
<td>01</td>
<td>Rs.26</td>
  </tr>

  <tr>
<td>05.</td>
<td>Potato 3737</td>
<td>1Kg-Rs.26</td>
<td>Rs.26</td>
<td>01</td>
<td>Rs.26</td>
  </tr>

  <tr>
<td>06.</td>
<td>Potato 3737</td>
<td>1Kg-Rs.26</td>
<td>Rs.26</td>
<td>01</td>
<td>Rs.26</td>
   </tr>

</table>
</div>

<div class="floatLeft">
<table>
 <tr bgcolor="#778899"><th colspan="2">Address</th>
</tr>
  <tr>
    <td>H.No.</td>
<td>K-1607</td>
</tr>
<tr>
    <td>Society</td>
<td>AVJ Heights</td>
</tr>
<tr>
    <td>Area</td>
<td>Zeta-1</td>
</tr>
<tr>
    <td>Landmark</td>
<td>ATS Dolce</td>
 </tr>
<tr>
    <td>Pincode</td>
<td>201301</td>
 </tr>
<tr>
    <td>City</td>
<td>Greater Noida</td>
 </tr>
<tr>
    <td>State</td>
<td>Uttar Pradesh</td>
</tr>
<tr>
    <td></td>
 </tr>
 </table>
 </div>

 <div class="floatLeft">
 <table>
 <tr bgcolor="#778899"><th colspan="2">Order Information</th>
</tr>
<tr>
    <td>Order Id</td>
<td>00001</td>
</tr>
<tr>
    <td>Total Amount</td>
<td>Rs.439</td>
</tr>
<tr>
    <td>Delivery Charge</td>
<td>Rs.49</td>
</tr>
<tr>
    <td>Grand Total</td>
<td>488</td>
</tr>
<tr>
    <td>Transaction Status</td>
<td>Success</td>
</tr>
<tr>
    <td>Transaction Id</td>
<td>XXXXXXXXXX</td>
</tr>
<tr>
    <td>Payment Mode</td>
<td>Online</td>
</tr>
<tr>
    <td>Delivery Slot</td>
  <td>10 AM - 12 PM</td>
 </tr>
  <tr>
    <td>Order Timing</td>
  <td>05:30 PM</td>
 </tr>
  <tr>
    <td>Ordee Date</td>
  <td>15/05/2020</td>
  </tr>
  </table>
 </div>



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

我该如何实现？

Answer 1

用于在获取新条目时创建新行...首先，您应该在HTML中指定输入元素...

<input type="text" id="myInput">

然后您应该在js代码中使用appendchild（）函数...

var newtr = document.createElement("tr");
var table = document.getElementsByName('table');
table.appendchild(newtr);

您可以搜索有关appendchild（）的信息，

我要在地址表的下面订购信息表

1 个答案: