个人中心
gpt4 book ai didi

php - 如何将 id 与主干中的表行删除按钮关联

转载 作者：行者123 更新时间：2023-12-01 02:07:34 25 4
gpt4 key购买 nike

我是backbone.js的新手，下面是我的代码，我所需要的只是backbone.js中所需的语法/代码，以便在表的每一行中生成唯一的id，以便当按下删除键时我从表中删除该特定行。 

$(function(){

    var Person = Backbone.Model.extend({
        id: 0,
        name: 'default name',
        age: 100
    });

    var PersonCollection = Backbone.Collection.extend({
        model: Person
      });

    var PersonView = Backbone.View.extend({
        el: $('#personEL'),

        events: 
        {
            "click #login-btn" : "loginClick"
        },
        loginClick: function()
        {
          var name = $('#name').val();
          var age = $('#age').val();
          var newPerson = new Person({id: 1,name: name, age : age});          

          this.personCollection.add(newPerson);          
          var showit = new zview({model: newPerson});

        },
        initialize: function(){
         this.personCollection = new PersonCollection();

           this.render(); 
        },

        render: function()
        {
                var template = _.template( $("#personInputTemplate").html(), {} );
        this.el.html(template);
                return this;
        }
    });



     zview = Backbone.View.extend({
        el: $('#personTable'),
        events:{
            'click #delete' : 'deleteItem'
        },
       initialize: function()
       {

        this.render();   
        return this;
       }
       ,
       render: function()
       {
           var template = _.template( $('#personDisplayTemplate').html(), this.model.toJSON() );
           console.log(template);
           $(this.el).append(template);
       }
       ,
       deleteItem: function()
       {
           console.log('delete');
       }
    });


var persons = new PersonView();

  });

html:

<body>




<script type="text/template" id="personInputTemplate">
    <p>Person Name<input type="text" id="name" /></p>
    <p>Person Age<input type="text" id="age" /></p>        
    <p><button id="login-btn">Save</button></p>
</script>

<script type="text/template" id="personDisplayTemplate">
            <tr>
                 <td><span><%= name ? name : '' %></span></td>
                 <td><span><%= age ? age : '' %></span></td>

                 <td><a href="#" id="<%= id ? id : '' %>" class="delete"> Delete</a> </label></td>

            </tr>
</script>


<div id ="personEL"></div>
<div id="showPerson"></div>
 <div id="display">
        <table id="personTable">

        </table>
    </div>

任何帮助、建议、代码表示赞赏。

最佳答案

你不需要乱搞 id是为了这个。您的事件处理程序会传递一个事件对象，该对象具有 target属性，对于点击事件，target将是被单击的 DOM 元素。像这样的事情应该可以解决问题:

deleteItem: function(ev) {
    var $tr = $(ev.target).closest('tr');
    // Now $tr is the jQuery object for the <tr> containing the .delete
    // element that was clicked.
    $tr.remove();
}

此外，您的模板(正确地)使用 class="delete"对于删除链接，但您的事件绑定(bind)到 id="delete" 的元素;你需要修复你的 events还有:

events: {
    'click .delete': 'deleteItem'
}

此外，你还有一只流浪</label>在您的删除链接中，您可以删除 id完全属性；只是这样应该没问题:

<td><a href="#" class="delete">Delete</a></td>

如果您确实需要id然后我会在 <tr> 上使用数据属性:

<tr data-id="<%= id ? id : '' %>">

然后你可以使用$tr.data('id')来访问它。将其附加到<tr>可以轻松地从行内的任何位置进行查找，并且使用数据属性可以避免重复 HTML id属性并最终得到无效的 HTML。 id值应该来自服务器，因为它们应该被定义。

关于php - 如何将 id 与主干中的表行删除按钮关联，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8482004/

25 4 0
文章推荐： javascript - 使用 ELM 的 If Else 语句
文章推荐： python - 向 dictReader 添加列而不修改 CSV 文件
文章推荐： jquery - 需要合并JQuery文件以节省加载时间
文章推荐： python - 在 mxnet 中高效创建压缩带状对角矩阵
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com