JavaScriptを使用して入力テーブルの下部に空の行を許可しようとしています

私は、テーブルの下部に空白の行を作成するボタンをクリックするフォームを作成しようとしています。追加したい行数だけこのボタンをクリックできます。何らかの理由で、作成したボタンをクリックすると、現在のページに行を追加するのではなく、index.phpページに戻ります。ここにいくつかのコードがあります。ここに追加する必要がある情報がある場合はお知らせください。 JavaScriptを使用して入力テーブルの下部に空の行を許可しようとしています

はあなたに

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>

出典

2017-09-21 jd0117

あなたのボタンは、デフォルトではそう<form>内にある、それは送信ボタンのように動作します。あなたはtype属性を追加することにより、通常のボタンに、そのタイプを設定する必要があります。

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

出典

2017-09-21 02:30:58 David

ワンダフル - ありがとうございました！ – jd0117

JavaScriptを使用して入力テーブルの下部に空の行を許可しようとしています

答えて

関連する問題