Question

在表单中添加数据后，单击以提交以使此数据显示在我的表格下方。像描述（表格）下的描述（我添加），日期（表格）下的日期（我添加）等等。名称下的金额应该是总金额除以4.例如：提交前的金额为100欧元，提交后25个。所以最终每个人都有25欧元的债务。在此先感谢您的帮助。我的代码是：

#body {
	background-color: grey
}
h1 {
	color:red;
}


.form{
    background:#f1f1f1; 
    width:400px; 
    margin-top:30px; 
    padding-left:10px; 
    padding-top:20px; 
    border-radius: 15px;
	}
	.form fieldset{border:0px; padding:0px; margin:0px;}
	.form p.contact { font-size: 12px; margin:0px 0px 15px 0;line-height: 10px; font-family:Arial, Helvetica;}
	.form input[type="text"] { width: 350px; }
	.form label { color: #000; font-weight:bold;font-size: 15px;font-family:Arial, Helvetica; }
	
	.form input, textarea { background-color: rgba(255, 255, 255, 0.4); 
		border: 1px solid rgba(118, 128, 137, 0.7); 
		padding: 7px; font-family: Keffeesatz, Arial; 
		color: #4b4b4b; 
		font-size: 14px; 
		-webkit-border-radius: 5px; 
		margin-bottom: 15px; 
		margin-top: -10px; }
	.form input:focus, textarea:focus { 
		border: 1px solid green; 
		background-color: rgba(255, 255, 255, 1); 
	}
	.form .select-style {
	  -webkit-appearance: button;
	  -webkit-border-radius: 2px;
	  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
	  -webkit-padding-end: 20px;
	  -webkit-padding-start: 2px;
	  -webkit-user-select: none;
	  background-image: url(images/select-arrow.png),
	    -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
	  background-position: center right;
	  background-repeat: no-repeat;
	  border: 0px solid #FFF;
	  color: #555;
	  font-size: inherit;
	  margin: 0;
	  overflow: hidden;
	  padding-top: 2px;
	  padding-bottom: 5px;
	  text-overflow: ellipsis;
	  white-space: nowrap;}
	
	.form input.buttom{ 
		background: #d8ba23; 
		display: inline-block; 
		padding: 5px 10px 6px; 
		color: black; text-decoration: none; 
		font-weight: bold; line-height: 1; 
		-moz-border-radius: 5px; 
		-webkit-border-radius: 5px; 
		border-radius: 5px; 
		-moz-box-shadow: 0 1px 3px #999; 
		-webkit-box-shadow: 0 1px 3px #999; 
		box-shadow: 0 1px 3px #999; 
		border: none; 
		position: relative; 
		cursor: pointer; 
		font-size: 14px; 
		font-family:Verdana, Geneva, sans-serif;
	}
	.form input.buttom:hover { background-color: #d88323;-moz-box-shadow: 0 5px 3px #999; 
		-webkit-box-shadow: 0 5px 3px #999; 
		box-shadow: 0 5px 3px #999; }

<center>
<div  class="form">

	    <form id="contactform" method="post" action="">
    
    <p class="contact"><label for="description">DESCRIPTION</label></p>
    <input id="description" name="description" placeholder="Enter the description" required oninvalid="this.setCustomValidity('Please enter the description ')" oninput="setCustomValidity('')"  type="text">

    <p class="contact"><label for="amount">AMOUNT</label></p>
    <input id="amount" name="amount" placeholder="&#8364" required oninvalid="this.setCustomValidity('Please enter the amount ')" oninput="setCustomValidity('')" /   type="number">
   
    <p class="contact"><label for="reference period">REFERENCE PERIOD</label></p>
    <input id="reference period" name="reference period" placeholder="Enter the reference period" required oninvalid="this.setCustomValidity('Please enter the reference period ')" oninput="setCustomValidity('')"  type="text">
<br>
   
            <input class="buttom" name="submit" id="btn" value="SUBMIT" type="submit" \>   
   </form>
	</div></center>
<br>
	

	<div>
		<table>
		    <tr><th>SULEYMAN</th></tr>
		    <tr><td>DESCRIPTION </td><td>REFERENCE PERIOD </td><td>AMOUNT</td></tr>

		    <tr><th>JACOPO</th></tr>
		    <tr><td>DESCRIPTION </td><td>REFERENCE PERIOD </td><td>AMOUNT</td></tr>

		    <tr><th>DENIS</th></tr>
		    <tr><td>DESCRIPTION </td><td>REFERENCE PERIOD </td><td>AMOUNT</td></tr>

		    <tr><th>LUCA</th></tr>
		    <tr><td>DESCRIPTION </td><td>REFERENCE PERIOD </td><td>AMOUNT</td></tr>
				    
	    </table>
		 
	</div>

Answer 1

我不确定这是你想要的，但看看并让我知道。此外，我没有形式验证和样式，请确保包括它们。感谢

＆＃13;

  $('#myForm').submit(function() {
    var desc = $('#name').val();
    var amount = $('#username').val();
    var ref = $('#date7').val();
    var amount_byfour = amount/4;
    var desc_elements = document.getElementsByClassName("d");
    for (var i=0; i<desc_elements.length; i++) {
      desc_elements[i].innerHTML+=desc+"<br>";}
    var ref_elements = document.getElementsByClassName("r");
    for (var i = 0; i < ref_elements.length; i++) {
      ref_elements[i].innerHTML+=ref+"<br>";}
    var amount_elements = document.getElementsByClassName("a");
    for (var i = 0; i < amount_elements.length; i++) {
      amount_elements[i].innerHTML+=amount_byfour+"<br>";}
    var debt_elements = document.getElementsByClassName("debt");
    for (var i=0;i < debt_elements.length; i++){
    var debt = debt_elements[i].innerHTML;
    var debt = Math.round((debt) * 1e12) / 1e12;
    debt_elements[i].innerHTML = debt + amount_byfour;}
    return false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<form id="myForm">
    <p class="contact"><label for="name">DESCRIPTION</label></p>
        <input id="name" name="name" placeholder="Enter the description" required type="text">

        <p class="contact"><label for="username">AMOUNT</label></p>
        <input id="username" name="username" placeholder="&#8364" required type="number">
       
        <p class="contact"><label for="name">REFERENCE PERIOD</label></p>
        <input id="date7" name="name1" placeholder="Enter the reference period" required type="text">

        <input class="buttom" name="submit" id="btn" value="SUBMIT" type="submit">
</form>
</div>
<div>
  <table>
        <tr><th>SULEYMAN</th></tr>
        <tr><td>DESCRIPTION </td><td>REFERENCE PERIOD </td><td>AMOUNT</td><td>DEBT</td></tr>
        <tr><td class="d"></td><td class="r"></td><td class="a"></td><td class="debt">0</td></tr>

        <tr><th>JACOPO</th></tr>
        <tr><td>DESCRIPTION </td><td>REFERENCE PERIOD </td><td>AMOUNT</td><td>DEBT</td></tr>
        <tr><td class="d"></td><td class="r"></td><td class="a"></td><td class="debt">0</td></tr>

        <tr><th>DENIS</th></tr>
        <tr><td>DESCRIPTION </td><td>REFERENCE PERIOD </td><td>AMOUNT</td><td>DEBT</td></tr>
        <tr><td class="d"></td><td class="r"></td><td class="a"></td><td class="debt">0</td></tr>

        <tr><th>LUCA</th></tr>
        <tr><td>DESCRIPTION </td><td>REFERENCE PERIOD </td><td>AMOUNT</td><td>DEBT</td></tr>
        <tr><td class="d"></td><td class="r"></td><td class="a"></td><td class="debt">0</td></tr>
            
  </table>
</div>

＆＃13;

如何在提交时向表中添加数据

1 个答案: