0

所以我通过jquery使用AJAX在有人点击提交按钮后将数据附加到表格中，它可以工作，但问题是它首先附加两个空的水平表格单元格，然后是包含数据的单元格和作为只要我点击提交按钮，那些空单元格就会加起来，看起来很奇怪..有没有办法解决这个问题..下面是我的代码。

$(document).ready(function() {

$( document ).on( 'click', '#submit_button', function () {
  event.preventDefault();

  var sku = $("#sku").val(); 
  var dec = $("#dec").val(); 


     $.ajax({
        url:"check_sku.php", 
         data:{sku: sku, dec:dec}, 
         type:"POST", 
        success:function(result){

            if(result !="MEID / DEC / SIM needed"){   
              $(".rows").remove();
              $("#submit_button").remove();
              $("#cancel").remove();
              $("#enter_product_sku").remove();
              $("#table_1").append(result);
            }
              if(result =="MEID / DEC / SIM needed"){          

                  $("#meid").show();

              }               
        }

      });


    });

});

结果变量中包含的附加数据是这样的……为什么它首先添加一行两个空表格单元格？

<tr class ='rows'><td style ='background:#CC9900;font-weight:bold;'>$title</td><td style='font-weight:bold;'>$count</td></tr>
    <tr id ="enter_product_sku"><td> Enter the product SKU </td><td><input id ="sku" type="text" name ="sku[]" size="20" value ="" /> </td></tr>
        <tr>
        <td>
        <input id ="submit_button"  class ="career_activation" style ="background:#33CC66; width:70px;  height: 50px; color:white; font-weight:bold;padding:10px;" type ="submit" name="submit" value ="ADD" /></td>
        <td>
        <input id ="cancel"  class ="career_activation" style ="background:#CC0000; width:70px; height: 50px; color:white; font-weight:bold; padding:10px;"type ="reset" name="cancal" value ="CANCEL" /></td>
        </tr>

控制台日志字符串

 <tr class ='rows'><td style ='background:#CC9900;font-weight:bold;'>Charger2</td><td style='font-weight:bold;'>18</td></tr><tr class ='rows'><td style ='background:#CC9900;font-weight:bold;'>Charger</td><td style='font-weight:bold;'>4</td></tr><tr class ='rows'><td style ='background:#CC9900;font-weight:bold;'>Iphone 6</td><td style='font-weight:bold;'>3</td></tr><tr class ='rows'><td style ='background:#CC9900;font-weight:bold;'>Previal</td><td style='font-weight:bold;'>4</td></tr><tr id ="enter_product_sku"><td> Enter the product SKU </td><td><input id ="sku" type="text" name ="sku[]" size="20" value ="" /> </td></tr><tr>
<td>
<input id ="submit_button"  class ="career_activation" style ="background:#33CC66; width:70px;  height: 50px; color:white; font-weight:bold;padding:10px;" type ="submit" name="submit" value ="ADD" /></td>
<td>
<input id ="cancel"  class ="career_activation" style ="background:#CC0000; width:70px; height: 50px; color:white; font-weight:bold; padding:10px;"type ="reset" name="cancal" value ="CANCEL" /></td>
</tr>
4

1 回答 1

0 
$.ajax(
{
    url:"check_sku.php", 
    data:{sku: sku, dec:dec}, 
    type:"POST", 
    success:
        function(result)
        {
            if(result !="MEID / DEC / SIM needed")
            {   
                $(".rows").remove();
                $("#submit_button").remove();//does not remove the tr and td tags only the input thus the remaining empty tds and trs
                $("#cancel").remove();//Same here
                $("#enter_product_sku").remove();//and here
                $("#table_1").append(result);
            }
            else if(result =="MEID / DEC / SIM needed")//I also added @Bill'o comments
            {
                $("#meid").show();
            }               
        }

    }
);

请参阅代码中的说明

考虑一下：

$.ajax(
{
    url:"check_sku.php", 
    data:{sku: sku, dec:dec}, 
    type:"POST", 
    success:
        function(result)
        {
            if(result !="MEID / DEC / SIM needed")
            {   
                $(".rows").remove();
                $("#submit_button").parent().parent().remove();
                $("#enter_product_sku").remove();
                $("#table_1").append(result);
            }
            else if(result =="MEID / DEC / SIM needed")//I also added @Bill'o comments
            {
                $("#meid").show();
            }               
        }

    }
);

您还可以在插入结果之前删除每个 tr 。

于 2014-07-24T19:08:47.063 回答