Question

我有一个表格，其中包含如下代码的元素：

<table border="1" bordercolor="#7695CC" id="table2">
<tr>
    <td class="tablesubtitle" align="center">No</td>
    <td class="tablesubtitle" align="center">Name Component</td>
    <td class="tablesubtitle" align="center">Name child Component</td>
    <td class="tablesubtitle" align="center"Point</td>
    <td class="tablesubtitle" align="center">Action</td>
</tr>                   
<tr>
    <td>1</td>
    <td><select name="component" onChange="NameComponent(this);">
        <option value="#">&nbsp;</option>
        <?php
            opendb();
            $query = "SELECT * FROM componentone";
            $result = mysql_query($query);
            while($data = mysql_fetch_array($result)){
                $ID = $data['ID'];
                $name = $data['Component'];
                echo "<option value='$ID'>$name</option>";
            }
        ?>
    </select>
</td>
<td><div id='childcomponent'><select>
        <option value="#"></option>
        </select>
                                            </div>
    </td>
    <td align="center"><a href="result_point.php?menu_id=<?=$menu_id?>">0</a></td>
    <td align="center"><input type="button" value=" + " onClick="addRowToTable();"> | <input type="button" value=" - " onClick="removeRowFromTable();"></td>
</tr>
</table>

如果你在那里看到一个onChange函数，该函数用于从数据库中调用数据结果，以便在选择组件名称{{}中的一个选项后显示结果（参见div元素）<div id='childcomponent'> 1}}。这两个元素是相连的。

<select name="component">

示例：1号，我选择的组件名称是AAA，这个AAA有三个子组件，是AAA1 AAA2 AAA3。选择AAA后，子组件（AAA1，AAA2和AAA3）中的三个将自动显示。这是我调用结果数据显示到function NameComponent(combobox) { var code = combobox.value; if (!code) return; xmlhttp.open('get', '../template/get_component_name-opr.php?code='+code, true); xmlhttp.onreadystatechange = function() { if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) { document.getElementById("childcomponent").innerHTML = xmlhttp.responseText; } return false; } xmlhttp.send(null); }时的代码：

<div id='childcomponent'>

在操作中，我想添加行并删除行。这是使用Javascript添加行的代码：

<?php
include ("config.php");
include ("dbfunctions.php");

echo "<script language=\"JavaScript\" src=\"js/form_validation.js\"></script>";

echo "<select name='child_component'>";
echo "<option value=\"\">&nbsp;</option>";
opendb();
$query = "SELECT * FROM childcomponent WHERE ID='$_GET[code]' ";
$result = querydb($query);
while ($data = mysql_fetch_array($result))
    {
        echo "<option value='".$data['ID']."'>".$data['childcomponent_name']."</option>";
    }
echo "</select>";
?>

我的问题是当我添加行时，第二个没有选项，我可以在组件名称中选择。问题是，如何在javascript中调用数据库中的数据？从这里调用数据库，也许？

<script language="Javascript">
function addRowToTable()
{
  var tbl = document.getElementById('table2');
  var lastRow = tbl.rows.length;
  var iteration = lastRow;
  var row = tbl.insertRow(lastRow);

  // left cell
  var cellLeft = row.insertCell(0);
  var textNode = document.createTextNode(iteration);
  cellLeft.appendChild(textNode);

  // right cell
  var cellRightSel1 = row.insertCell(1);
  var sel = document.createElement('select');
  sel.name = 'component' + iteration;
  cellRightSel1.appendChild(sel);

  // select cell
  var cellRightSel2 = row.insertCell(2);
  var sel = document.createElement('select');
  sel.id = 'childcomponent' + iteration;
  sel.options[0] = new Option('','');
  sel.options[1] = new Option('', '');
  cellRightSel2.appendChild(sel);

  var cellRight = row.insertCell(3);
  var el = document.createElement('input');

  cellRight.appendChild(el);

}
<script>

提前致谢。

Answer 1

以下是几个选项：

使用与NameComponent相同的想法：当用户单击“添加行”按钮时，您对服务器进行Ajax调用，并让PHP响应您要在新行中显示的HTML。然后使用innerHTML插入HTML。
将“添加行”按钮更改为“提交”按钮。然后让PHP生成带有额外行的更新页面。

Answer 2

好的，既然你说你希望了解这个问题，我花了一些时间来更详细地分析你的代码。首先，要回答你的问题，没有办法从javascript“调用数据库”。您可以做的是向服务器发送ajax请求并使用响应，就像您在NameComponent函数中所做的那样，就像@WayneBaylor建议的那样。

现在，您的代码还有许多其他问题。以下是我认为最严重的一些：

使用addRowToTable以编程方式创建新行时，它应与使用PHP创建的默认行相同。您的代码创建了一个类似但不同的行，它缺少第一个组件上的“change”事件，而div包含子组件（它直接位于<td>内）。 addRowToTable还会通过添加4列而不是预期的5行来破坏HTML表格（并且第4个单元格上的输入不执行任何操作且没有标签）。
addRowToTable也有一个有问题的编号逻辑（他们将iteration设置为tbl.rows.length）。想象一下，你从一行开始，再添加三行。然后删除第二行，再添加一行。第三行和第四行都将编号为“4”，更糟糕的是：您将拥有两个ID为childcomponent4的元素，这些元素无效。
您的“更改”处理程序NameComponent必须重做。您无法执行document.getElementById("childcomponent")，因为您始终将内容设置为第一行中的div，而不是更改的<select>所属的行。您将在同一行（当前代码未创建）中查找子组件容器div。
正如@MarcB指出的那样，PHP代码上有一个SQL注入漏洞。在确定SELECT * FROM childcomponent WHERE ID='$_GET[code]'包含数字之前，您不应该$_GET[code]。否则，您的数据库将非常容易受到攻击。顺便说一下，如果它真的是一个数字，并且数据库中的ID列是一个整数，那么$_GET['code']之间也不需要单引号（但请注意，code周围需要单引号在$_GET['code']，您目前没有。）

我建议你学习和使用jQuery，因为它会让你的事情更简单。例如，在addRowToTable上，使用普通的js DOM操作方法从表中克隆样本行非常容易，而不是从零创建新行。你可能意识到他们很难用......

我希望这可以帮助您将代码放在正确的轨道上。

没有选项，也无法选择。如何在Javascript中调用数据库中的数据？

2 个答案: