用于将所选行添加到另一个表的按钮

时间:2016-01-06 12:18:34

标签: javascript php html

我修复了上一个将数据从1个表添加到另一个表的问题。现在我遇到一个问题,当单击行末尾的按钮时,它会插入该表的最后一行而不是所选行。如何修复我的代码,以便将按钮按下的行插入新表而不是最后一行?

例如它现在做的表

AA11AAA BMW 320I [ADD]
BB11BBB BMW 325I [ADD]
CC11CCC BMW 330I [ADD]

如果我点击第一行(AA11AAA BMW 320I)上的按钮,它会将最后一行添加到新表中

CC11CCC BMW 330I

我希望它添加单击按钮的行,因此如果单击第一行按钮,则会将第一行添加到新表中

AA11AAA BMW 320I

我希望这很清楚,这是我的代码。

<tr>
    <input type="hidden" name="regNo" value="<?php echo $row['regNo'] ?>">
    <input type="hidden" name="carMake" value="<?php echo $row['carMake'] ?>">
    <input type="hidden" name="carModel" value="<?php echo $row['carModel'] ?>">
    <td><?php echo $row["regNo"] ?></td>
    <td><?php echo $row["carMake"] ?></td>
    <td><?php echo $row["carModel"] ?></td>
    <td><button onclick="addRowToTable()">ADD</button></td>
</tr>

脚本

function addRowToTable() {
var table = document.getElementById("newCarTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = "<?php echo $row["regNo"] ?>";
cell2.innerHTML = "<?php echo $row["carMake"] ?>";
cell3.innerHTML = "<?php echo $row["carModel"] ?>";
}

php脚本

<?php
$sql = "SELECT regNo, carMake, carModel
        FROM vehicles";
$result = mysqli_query($connection, $sql);  
    if (mysqli_num_rows($result) > 0)
      {
 while($row = mysqli_fetch_assoc($result)) 
 {
?>

我的tr如何在页面源中看起来像

<tr>
    <input type="hidden" name="regNo" value="AA11AAA">
    <input type="hidden" name="carMake" value="BMW">
    <input type="hidden" name="carModel" value="320I">
    <td>AA11AAA</td>
    <td>BMW</td>
    <td>320I</td>
    <td><button onclick="addRowToTable(AA11AAA,BMW,320I)">ADD</button></td>
</tr>

我现在正在尝试将新表记录添加到我的数据库

        <table id="newCarTable">
        <form action = "addNewCarTable.php" method = "post">
        <input id="submit" type="submit" name="submit" value="Submit">
        </form>
    </table>

addNewCarTable.php

if (isset($_POST['submit'])){
$curRegNo = $_POST['regNo'];
$curCarMake = $_POST['carMake'];
$curCarModel = $_POST['carModel'];

$_SESSION["regNo"] = $curRegNo;
$_SESSION["carMake"] = $curCarMake;
$_SESSION["carModel"] = $curCarModel;

$sql = "INSERT INTO newCars(regNo, carMake, carModel)
        VALUES('$curRegNo', '$curCarMake', '$curCarModel')";

1 个答案:

答案 0 :(得分:1)

首先,混合使用Javascript和PHP是一种不好的做法。 (https://softwareengineering.stackexchange.com/questions/126671/is-it-considered-bad-practice-to-have-php-in-your-javascript

你的问题是你在javascript中使用PHP错了。 PHP渲染你的DOM(包括javascript),然后执行javascript。因此,函数中的数字将是静态的,而不是动态的。 您的最终脚本将如下呈现:

function addRowToTable() {
    var table = document.getElementById("newCarTable");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    cell1.innerHTML = "CC11CCC ";
    cell2.innerHTML = "BMW ";
    cell3.innerHTML = "330I ";
}

当您的脚本执行时,数字已经是硬编码的。您可以通过在浏览器中查看网站的源代码来对其进行更改。

您需要做的是从DOM中获取数字,而不是使用PHP。 我不知道你的PHP脚本,但这样的事情可能会起作用:

<?php
$sql = "SELECT regNo, carMake, carModel
        FROM vehicles";
$result = mysqli_query($connection, $sql);  
    if (mysqli_num_rows($result) > 0)
      {
 while($row = mysqli_fetch_assoc($result)) 
 {
   $curRegNo = $row["regNo"];
   $curCarMake = $row["carMake"];
   $curCarModel = $row["carModel"];
?>

你的桌子排:

<tr>
  <input type="hidden" name="regNo" value="<?php echo $row['regNo'] ?>">
  <input type="hidden" name="carMake" value="<?php echo $row['carMake'] ?>">
  <input type="hidden" name="carModel" value="<?php echo $row['carModel'] ?>">
  <td>
    <?php echo $row["regNo"] ?>
  </td>
  <td>
    <?php echo $row["carMake"] ?>
  </td>
  <td>
    <?php echo $row["carModel"] ?>
  </td>
  <td>
    <button onclick="addRowToTable('<?php echo $curRegNo ?>','<?php echo $curCarMake ?>','<?php echo $curCarModel ?>')">ADD</button>
  </td>
</tr>

然后在Javascript函数中添加参数:

function addRowToTable(regNo, carMake, carModel) {
    var table = document.getElementById("newCarTable");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    cell1.innerHTML = regNo;
    cell2.innerHTML = carMake;
    cell3.innerHTML = carModel;
}

这是一个有效的CodePen:http://codepen.io/anon/pen/pgeaOx 它使用的是硬编码数字,因为我无法使用PHP渲染模板,但它会显示Javascript的工作原理。