首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >无法使用javascript获取动态删除/编辑HTML表格的值

无法使用javascript获取动态删除/编辑HTML表格的值
EN

Stack Overflow用户
提问于 2018-08-26 08:20:10
回答 1查看 95关注 0票数 3

我正在尝试写一段代码,可以处理删除或编辑动态HTML表。我用谷歌搜索了这个问题,我看到了很多样本,但没有一个能正常工作。

下面是我的代码:

server.js

router.get('/bookShow', (req, res) => {
    bookModel.find({isDeleted : false}).sort('-pageCount').exec((err, data) => {
        if (data) {
            res.send(data);
        }
    });
});

数据库中的BookModel:

bookShow.html

<script>
    $(document).ready(() => {
        $.getJSON('/bookShow', (json) => {
            var tr;
            for (var i = 0; i < json.length; i++) {
                tr = $('<tr/>');
                tr.append("<td>" + "<button class='deleteButton'>" + "<i class='material-icons'>delete</i></button>" + "</td>");
                tr.append("<td>" + "<button class='editButton'>" + "<i class='material-icons'>edit</i></button>" + "</td>");
                tr.append("<td>" + json[i].pageCount + "</td>");
                tr.append("<td>" + json[i].name + "</td>")
                $('table').append(tr);
            }
        });

        $(document).on('click', '.deleteButton', () => {
            console.log($(this));
        })
    });  
</script>

问题:正如它在bookShow.html中看到的那样,每当.deleteButton单击时,我都会声明一个事件侦听器。但是我不能访问该表行的其他字段。例如,当我点击Behzad的delete按钮时,我得不到书的名称和页数。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-26 08:36:22

通过使用ES6的箭头函数 () => {}this不再是你使用function时喜欢的东西。它是window,因为它们是词法作用域绑定的本质。不再是jQuery对DOM元素"this“的表示。

$(this) =

使用箭头函数() => {}进行jQuery.fn.init Window

使用函数function () {}进行jQuery.fn.init button.deleteButton

因此,您的解决方案将是使用标准的$(document).on('click', '.deleteButton', function() {

或者在按钮创建时添加click -这可以通过使按钮成为内存中的jQuery元素$('<button>', {on:{click(){}}, appendTo:'selector'})而不是HTML string文字来实现。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

这是一个翻拍:

const json = [ // You use getJSON, I'll use this for my demo
{"name": "King of the Jungle","pageCount": 543},
{"name": "The Things I've Done","pageCount": 198}
];

jQuery($ => {

  // $.getJSON

  $('table').append(json.map((book, i) => 
    $('<tr>', {
      html: `
        <td>${i+1}</td>
        <td>${book.name}</td>
        <td>${book.pageCount}</td>
      `,
      append: [       // or use prepend
        $('<td>', {
          append: $('<button>', {
            class: "buttonEdit",
            html: "<i class='material-icons'>edit</i>",
            on: {
              click() { // Same as using `click: function () {`
                console.log(`Editing ${book.name} by:`, this); // this = <button>
              }
            }
          })
        }),
        $('<td>', {
          append: $('<button>', {
            class: "buttonDelete",
            html: "<i class='material-icons'>delete</i>",
            on: {
              click() {
                console.log(`Deleting ${book.name} by:`, this);
              }
            }
          })
        }),        
      ]
    })
  ));

  // END $.getJSON

});
table {
  width: 100%;
}

td {
  border: 1px solid #ddd;
}
<table></table>
<script src="//code.jquery.com/jquery-3.1.0.js"></script>

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52022267

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档