为什么我不能在这段代码中使用jQuery在HTML中添加一行？

时间：2019-05-18 20:31:08

标签： php jquery html

我完成了用jQuery在HTML中添加行的实际过程，但是似乎没有用。您能提供解决方案吗？我怎么解决这个问题？ “添加行”按钮不起作用，为什么？我尝试了很多方法，但都失败了。谁能帮我？ 我也用JavaScript尝试过，但结果相同。

$(document).ready(function() {
  $(".addRow").click(function() {
    $('table').append("<tr>" +

      "<td align="
      center "><input type="
      text " name="
      id_country " value="
      <?php echo $row["id_country"];?>
      "><br>" +
      "</td>" +
      "<td><input type="
      text " name="
      name " value="
      <?php echo $row["name"];?>
      "><br>" +
      "</td>" +
      "<td><input type="
      text " name="
      codes " value="
      <?php echo $row["codes"];?>
      "><br>" +
      "</td>" +

      "<td><input type="
      text " name="
      types " value="
      <?php echo $row["types"];?>
      "><br>" +
      "</td>" +
      "<td><input type="
      text " name="
      t_code " value="
      <?php echo $row["t_code"];?>
      "><br>" +
      "</td>
      "<td><input type="
      text " name="
      range_name " value="
      <?php echo $row["range_name"];?>
      "><br>" +
      "</td>
      "<td align="
      center "><input name="
      usubmit " type="
      submit " value="
      Update " /></td>" +
      "<td align="
      center "><input name="
      dsubmit " type="
      submit " value="
      Delete " /></td>" +

      "</tr>"
    );

  });
}); <
/script>
<link rel="stylesheet" href="css/style.css" />
<html>

<head>
  <meta charset="utf-8">
  <title>View Records</title>
</head>



<body>
  <div class="form">
    <p><a href="input_auth/index.php">Home</a> | <a href="insert.php">Insert New Record</a> | <a href="input_auth/in_out.php">Logout</a></p>
    <h2>View Records</h2>
  </div>
  <table width="100%" border="1" id="table" style="border-collapse:collapse;">
    <thead>
      <tr>
        <th><strong>Id_country</strong></th>
        <th><strong>Name</strong></th>
        <th><strong>codes</strong></th>
        <th><strong>Medium</strong></th>
        <th><strong>Medium_code</strong></th>
        <th><strong>Class</strong></th>
        <th><strong>Edit</strong></th>
        <th><strong>Delete</strong></th>
      </tr>
    </thead>
    <tbody>
      <form name="form" method="post" action="">
        <input type="hidden" name="new" value="1" />
        <tr>

          <td align="center"><input type="text" name="id_country" value="<?php echo $row[" id_country "];?>"><br>
          </td>
          <td><input type="text" name="name" value="<?php echo $row[" name "];?>"><br>
          </td>
          <td><input type="text" name="codes" value="<?php echo $row[" codes "];?>"><br>
          </td>

          <td><input type="text" name="types" value="<?php echo $row[" types "];?>"><br>
          </td>
          <td><input type="text" name="t_code" value="<?php echo $row[" t_code "];?>"><br>
          </td>
          <td><input type="text" name="range_name" value="<?php echo $row[" range_name "];?>"><br>
          </td>
          <td align="center"><input name="usubmit" type="submit" value="Update" /></td>
          <td align="center"><input name="dsubmit" type="submit" value="Delete" /></td>

        </tr>



        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td align="right"> <input type="button" name="asubmit" class="addRow" value="Add Row"></td>
        </tr>
      </form>
    </tbody>

  </table>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>

</html>

1 个答案:

答案 0 :(得分：1)

这里的问题是，您用"括了一个字符串，但是该字符串中包含"的多个实例（例如"<td align="center">..."）。因此，当JavaScript解析器评估该行时，它将决定字符串在"之后的第二个=处结束。因此对于解析器而言，字符串为"<td align="，并且下一个字符串开始之前存在无效的令牌中心）。因此整个表达式都被javascript弄乱了。

解决方案是将"的所有字符串实例替换为'，如下所示：

$(document).ready(function() {
    $(".addRow").click(function() {
        $('table').append("<tr>" +
            "<td align='center'><input type='text' name='id_country' value='<?php echo $row['id_country'];?>'><br>" +"</td>" +
            "<td><input type='text ' name='name ' value=<?php echo $row['name'];?>'><br>" +"</td>" +
            "<td><input type='text ' name='codes ' value='<?php echo $row['codes'];?>'><br>" +"</td>" +
            "<td><input type='text ' name='types ' value='<?php echo $row['types'];?>'><br>" +"</td>" +
            "<td><input type='text ' name='t_code ' value='<?php echo $row['t_code';?>'><br>" +"</td>" +
            "<td><input type='text ' name='range_name ' value='<?php echo $row['range_name'];?>'><br>" +"</td>" +
            "<td align='center '><input name='usubmit ' type='submit ' value='Update ' /></td>" +
            "<td align='center '><input name='dsubmit ' type='submit ' value='Delete ' /></td>" +
            "</tr>"
        );
    });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table width="100%" border="1" id="table" style="border-collapse:collapse;">
    <thead>
    <tr>
        <th><strong>Id_country</strong></th>
        <th><strong>Name</strong></th>
        <th><strong>codes</strong></th>
        <th><strong>Medium</strong></th>
        <th><strong>Medium_code</strong></th>
        <th><strong>Class</strong></th>
        <th><strong>Edit</strong></th>
        <th><strong>Delete</strong></th>
    </tr>
    </thead>
    <tbody>
    <form name="form" method="post" action="">
        <input type="hidden" name="new" value="1"/>
        <tr>

            <td align="center"><input type="text" name="id_country" value="<?php echo $row[" id_country "];?>"><br>
            </td>
            <td><input type="text" name="name" value="<?php echo $row[" name "];?>"><br>
            </td>
            <td><input type="text" name="codes" value="<?php echo $row[" codes "];?>"><br>
            </td>

            <td><input type="text" name="types" value="<?php echo $row[" types "];?>"><br>
            </td>
            <td><input type="text" name="t_code" value="<?php echo $row[" t_code "];?>"><br>
            </td>
            <td><input type="text" name="range_name" value="<?php echo $row[" range_name "];?>"><br>
            </td>
            <td align="center"><input name="usubmit" type="submit" value="Update"/></td>
            <td align="center"><input name="dsubmit" type="submit" value="Delete"/></td>

        </tr>


        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td align="right"><input type="button" name="asubmit" class="addRow" value="Add Row"></td>
        </tr>
    </form>
    </tbody>

</table>

或者，您也可以：

  • 使用\"作为字符串内的引号。 \将以下字符视为文字，即不表示字符串的开头或结尾引号。
  • 使用'作为字符串的外部引号，并按原样使用"作为字符串中的引号。 \"也可以，但不是必需的。但是，对于字符串内的引号，不能使用相同的'，因为编译器会将其解释为字符串的末尾。
相关问题
最新问题