Question

如何在旧行的顶部添加新行？当我先按下按钮时它会添加正常然后当我尝试添加一个新行时它会添加到右侧并且我真的很困惑你们可以帮助我吗？（抱歉我的英语不好并提前感谢！）

    $(document).ready(function(){
    $("div").hover(function(){
        $(this).fadeTo("fast",1);
        }, function(){
        $(this).fadeTo("fast",0.5);
        });
    
    $("#BTN_AddToWebsites").click(function(){
    
    var site = $('#INPUT_NameOfTheSite').val();
    var url = $('#INPUT_TheSitesUrl').val();
    var domain = $('#INPUT_Domain').val();
    
    
    if(site.length >= 1 && url.length >= 1 && domain.length >= 1){
        /*Text to appear*/
      $('.SiteSection').after('<td class="textfix">'+"https://www."+url+domain+'</td>');
      $('.SiteSection').after('<td class="textfix">'+site+'</td>');
      
      $('#INPUT_NameOfTheSite').val('');
      $('#INPUT_TheSitesUrl').val('');
      $('#INPUT_Domain').val('');
      
      $("#INPUT_NameOfTheSite").css("border", "2px solid black");
      $("#INPUT_TheSitesUrl").css("border", "2px solid black");
      $("#INPUT_Domain").css("border", "2px solid black");
      
    }
    
    if(site.length === 0){
       $("#INPUT_NameOfTheSite").css("border", "2px solid red");
    }
    
     if(url.length === 0){
      $("#INPUT_TheSitesUrl").css("border", "2px solid red");
    }
    
     if(domain.length === 0){
      $("#INPUT_Domain").css("border", "2px solid red");
    }
    
    });
    
      $("#INPUT_NameOfTheSite").click(function(){
       $("#INPUT_NameOfTheSite").css("border", "2px solid black");
      });
       $("#INPUT_TheSitesUrl").click(function(){
       $("#INPUT_TheSitesUrl").css("border", "2px solid black");
      });
       $("#INPUT_Domain").click(function(){
       $("#INPUT_Domain").css("border", "2px solid black");
      });
      
    });

Answer 1

我想你打算在＆＃39; .siteSection＆＃39;上添加你的新元素。定位该类的第一个元素，并在该点添加它而不是最后一个元素。

尝试使用＆＃39;：last＆＃39;您的siteSelection类之后的伪选择器，如$（＆＃39; .siteSelection：last＆＃39;）

工作变更：添加功能中缺少表格行的添加。已更改https://jsfiddle.net/6uryyruv/2/以反映此情况。

大致：17：

$('.SiteSection:last').after('<tr class="SiteSection"><td class="textfix">'+site+'</td><td class="textfix">'+"https://www."+url+domain+'</td>tr>');

我更愿意更新它，以便更好地更新它。代码块并且更易于阅读 - 但这应该是您解决此特定问题的方法。

Html向表中添加行

1 个答案: