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();

              }               
        }

      });


    });

});

結果変数に含まれる、追加されるデータは次のとおりです... 最初に 2 つの空のテーブル セルの行を追加する理由は何ですか?

<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 に答える