Question

我正在尝试创建一个表单，用户可以单击一个按钮，该按钮将在表格的底部创建一个空行。他们可以单击此按钮以添加要添加的行数。出于某种原因，当我点击我创建的按钮时，它会返回到我的index.php页面，而不是仅仅将行添加到当前页面。这是一些代码。如果有更多信息需要我在这里添加，请告诉我。

谢谢

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>

Answer 1

您的按钮位于<form>内，因此默认情况下它的行为类似于提交按钮。您必须通过添加type属性将其类型设置为普通按钮：

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

尝试使用JavaScript允许空行到输入表的底部

1 个答案: