jQuery - 显示添加的行

Posted 2023-05-09

【中文标题】jQuery - 显示添加的行

【英文标题】：jQuery - showing the added row

【发布时间】：2012-04-26 18:54:04

【问题描述】：

我有一个网页应该插入新的数据库记录并将它们显示给用户。

我想要的是当我添加一个人时，s(he) 必须看到添加的行。我有以下代码：

function AddData(par)

    var artistName =  $("input[name='"+par+"']").attr('id') + '-'+$("input[name='"+par+"']").val();

   $.post('/json/management/AddDataAjax2', 
    
       "artistName": artistName
    ,
    function(response)
        console.log(response);
        if(response =='ok')
             alert("Başarıyla eklendi"); 
        
         else
             alert("Sanatçı bulunamadı, yönlendiriliyorsunuz");
             window.location.replace("http://www.sinemalar.com/management/artistAddEditRemove/");
         
);

标签都是 div。我给每个选项卡一个 ID，并在插入记录后添加了一个 div 刷新。但是，它会呈现我加载的原始页面。有什么解决办法，有什么建议吗？

【参考方案1】：

只需在您希望显示数据的地方创建一个 div，如下所示：

<div id="added"></div>

然后将您的 jQuery 编辑为：

function(response)
    console.log(response);
    if(response =='ok')
         $("#added").append(artistName . "<br>");
         alert("Başarıyla eklendi");
    

【参考方案2】：

如果刷新页面，您可以使用 append() 将新项目附加到列表中吗？

已编辑：您可能会发现此示例很有用：

test.html >>

 <script src="jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript">                                                                                                      

 $(document).ready(function() 
     $("input[type='button']").click(function() 
        value = $("input[type='text']").val();
        $('ui').append("<li>"+value+"</li>");
     );
  );

</script>
<ui id='list'>
  <li>item1</li>
  <li>item2</li>

</ui> 

<input type='text'/><input type='button' value='Add'/>