通过JS在表格中添加新行，如何包含变量？

Question

我知道我犯了一个愚蠢的错误……但是一个小时前，我开始使用ajax。 我在JS中的变量有问题。

当我写+'id_komputery'+时，js返回错误：“参数列表后未捕获的SyntaxError：缺少”。 与id ='id_komputery'相同

    $.ajax({
    url:'add.php',
    method:'POST',
    data:{
        producent_new:'producent_new',
        nazwa_new:'nazwa_new'
    },
    success:function()
    {
        var id_komputery = '<?= $id_komputery ?>';
        console.log(id_komputery);
        $("#main_table > tbody").append('<tr id='id_komputery' ><td width="50" align="center"><input type="checkbox" name="komp_id[]" class="delete_komputery" value='id_komputery' /></td><td width="50" align="center">+'id_komputery'+</td></tr>');
    }
});

Answer 1

我已更正了您的代码。 将您的代码替换为以下代码：

$.ajax({
   url:'add.php',
   method:'POST',
   data:{
      producent_new:'producent_new',
      nazwa_new:'nazwa_new'
   },
   success:function()
   {
      var id_komputery = '<?= $id_komputery ?>';
      console.log(id_komputery);
      $("#main_table > tbody").append('<tr id="'+ id_komputery +'"><td width="50" align="center"><input type="checkbox" name="komp_id[]" class="delete_komputery" value="'+ id_komputery +'" /></td><td width="50" align="center">'+ id_komputery +'</td></tr>');
   }
});

Answer 2

您在'id_komputery'列中输入错误。 它错过了concat运算符。您必须使用以下命令更改它：

'<tr id="' + id_komputery + '" >...'
'...<input type="checkbox" name="komp_id[]" class="delete_komputery" value="' + id_komputery + '" />'

或在es2015 +中，可以使用插值表达式：

$("#main_table > tbody").append(`<tr id="${id_komputery}"><td width="50" align="center"><input type="checkbox" name="komp_id[]" class="delete_komputery" value="${id_komputery}" /></td><td width="50" align="center">${id_komputery}</td></tr>`);

Answer 3

您忘了将'''放在+'id_komputery'+ '</td></tr>') （您有+'id_komputery'+ </td></tr>') ）附近，而javascript认为它是可变的，是无效的变量，您不应该在此处加引号+'id_komputery'+这将成为简单的字符串文字，而是您只需编写id_komputery

$("#main_table > tbody").append('<tr id='id_komputery' ><td width="50" align="center"><input type="checkbox" name="komp_id[]" class="delete_komputery" value='id_komputery' /></td><td width="50" align="center">+'id_komputery'+'</td></tr>')

Answer 4

替换此行：

$("#main_table > tbody").append('<tr id='id_komputery' ><td width="50" align="center"><input type="checkbox" name="komp_id[]" class="delete_komputery" value='id_komputery' /></td><td width="50" align="center">+'id_komputery'+</td></tr>');

与此：

$("#main_table > tbody").append('<tr id="' + id_komputery + '"><td width="50" align="center"><input type="checkbox" name="komp_id[]" class="delete_komputery" value='id_komputery' /></td><td width="50" align="center">'+id_komputery+'</td></tr>');

Answer 5

您会忘记附加行周围的几个引号以及一个小的更改。

$("#main_table > tbody")
    .append('<tr id='id_komputery' >
        <td width="50" align="center">
            <input type="checkbox" 
                   name="komp_id[]" 
                   class="delete_komputery" 
                   value='id_komputery' />
        </td>
        <td width="50" align="center">+'id_komputery'+ 
        </td></tr>'
   );

以上是您的语法格式。

下面是固定引号的语法。

$("#main_table > tbody")
    .append('<tr id="id_komputery">
        <td width="50" align="center">
            <input type="checkbox" 
                   name="komp_id[]" 
                   class="delete_komputery" 
                   value="id_komputery"/>
        </td>
        <td width="50" align="center">'
            +id_komputery+
        '</td></tr>'
   );