en essayant d'autoriser une rangée vide au bas d'une table d'entrée en utilisant JavaScript

J'essaye de créer un formulaire où l'utilisateur peut cliquer sur un bouton qui créera une rangée vide au fond de la table. Ils peuvent cliquer sur ce bouton pour autant de lignes qu'ils veulent ajouter. Pour une raison quelconque, lorsque je clique sur le bouton que j'ai créé, il revient à ma page index.php au lieu de simplement ajouter la ligne à la page en cours. Voici une partie du code. S'il vous plaît laissez-moi savoir s'il y a plus d'informations que je devrais ajouter ici.en essayant d'autoriser une rangée vide au bas d'une table d'entrée en utilisant JavaScript

Merci

JavaScript:

function new_line() { 
var t = document.getElementById("desc_table"); 
var rows = t.getElementsByTagName("tr"); 
var r = rows[rows.length - 1]; 
var x = rows[1].cloneNode(true); 
x.style.display = ""; 
r.parentNode.insertBefore(x, r); 
} 


<?php include 'connect.php'; ?> 

<!DOCTYPE xhtml> 

<html> 
<head> 
<style type="text/css"><?php //include'css\file.css';?></style> 
<script type="text/javascript" src="js/new_line.js"></script> 
<script type="text/javascript" src="js/menu.js"></script> 
<body> 
<button id="home" onclick="home_btn()">Home</button> 

<title>New Estimate</title> 

<h1>New Estimate</h1> 
<?php 
$sql = $conn->prepare('SELECT * FROM entire_info'); 
$sql -> execute(); 
$result = $sql ->get_result(); 
if ($result->num_rows!=0) { 
    $entire_info=$result->fetch_assoc(); 
} 
else{ 
    echo'Cannot find company information<br>'; 
} 
?> 
<form> 
<table id="estimate_table"> 
    <tr> 
     <td> 
     <?php 
      echo '<h1>'.$entire_info['name'].'</h1><br>'. 
       $entire_info['str_address'].'<br>'. 
       $entire_info['city'].', '.$entire_info['province'].' '.$entire_info['postal'] 
       .'<br>Phone:'.$entire_info['phone'].'<br>Fax:'.$entire_info['fax'].'<br>'.$entire_info['email'].'<br>'; 
     ?> 
     <br> 
     </td> 
     <td colspan="3" style="text-align: right;"><?php echo '<h1>Estimate</h1>'; ?></td> 
    </tr> 
    <tr> 
     <td> 
      <table> 
       <tr> 
        <td style="vertical-align: top;"> 
         For:<br> 
         <select name="estimate_for">        
         <?php 
         $sql = $conn->prepare('SELECT * FROM company'); 

         $sql -> execute(); 
         $result = $sql ->get_result(); 

         if ($result->num_rows>0) { 
          while ($row=$result->fetch_assoc()) { 
           $company_name = $row['company']; 
           echo '<option value="'.$company_name.'">'.$company_name.'</option>'; 
          } 
         } 
         else{ 
          echo'Cannot find company information<br>'; 
         } 
         ?> 
         </select> 
        </td> 
        <td> 
         Job:<br> <textarea name="job_name" style="width: 200px ! important;" style="height: 30px ! important;"></textarea> 
        </td> 
       </tr> 
      </table> 
     </td> 
     <td colspan="3" style="text-align: right;"> 
      Invoice#: <br> 
      Date: <input type="text" name="estimate_date" value="<?php echo date('M d, Y'); ?>">     
     </td> 

    </tr> 
    </table> 
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
    <table id="desc_table"> 
    <tr> 
     <td><font><br><h3>Description</h3></font></td> 
     <td><font><h3>Hours</h3></font></td> 
     <td><font><h3>Rate</h3></font></td> 
     <td><font><h3>Amount</h3></font></td> 
    </tr> 
    <tr> 
     <td ><textarea name="description" style="width: 400px" style="height: 100px ! important;"></textarea></td> 
     <td> <input type="text" name="hours"></td> 
     <td> <input type="text" name="rate"></td> 
     <td><input type="text" name="amount"></td> 
     <td> 
      <button onclick="new_line();">+</button> 
     </td> 
    </tr> 

    <tr>    
     <td colspan="3" style="text-align: right;"><h3>Subtotal</h3></td> 
     <td><input type="text" name="subtotal"></td> 
    </tr> 
    <tr> 
     <td colspan="3" style="text-align: right;"><h3>GST (#87221 2410) 
</h3></td> 
     <td><input type="text" name="gst"></td> 
    </tr> 
    <tr> 
     <td colspan="3" style="text-align: right;"><h3>Total</h3></td> 
     <td><input type="text" name="subtotal"></td> 
    </tr> 
</table> 
</form> 
</head> 
</body> 
</html>

Source

2017-09-21 jd0117

Votre bouton se trouve dans un <form> donc par défaut, il se comporte comme un bouton d'envoi. Vous devez définir son type à un bouton normal en ajoutant l'attribut de type:

<button onclick="new_line();" type="button">+</button>

Source

2017-09-21 02:30:58 David

Magnifique - merci! – jd0117

en essayant d'autoriser une rangée vide au bas d'une table d'entrée en utilisant JavaScript

Répondre

Questions connexes