在JavaScript中创建n个按钮(或可变数量的按钮)

时间:2016-08-23 22:04:05

标签: javascript jquery

我是JavaScript的新手,我很难完成这项任务。我正在编写代码来分页我有一个表。现在所有与按钮相关的逻辑都是硬编码的,我想让它更具动态性。意思是,我有五个按钮,它们都有单独的代码来做同样的事情,我想重构我的代码,这样我就有了n个按钮和一个控制它们的脚本。

我希望代码生成(每页的总记录数/记录数)按钮数,然后我想获取该按钮的值并将其传递给现有代码以获取数据表的右侧部分。

虽然如何做到这一点?我发现的所有文档都是针对像DataTables这样的jQuery库(我花了一个小时的时间来处理它并且没有显示任何内容)。

我会很感激任何提示,技巧或教程。

修改

    $(document).ready(function () {
        $('#b1').click(function () {
            var data = $("#isgeo").serializeArray();
            data.push({ name: "page", value: '1' })
            $.ajax({
                type: 'GET',
                url: '@Url.Action("GetTable", "SubsidencePoints")',
                data: $.param(data),
                cache: false,
                processData: false,
                contentType: false
            }).done(function (result) {
                $('#Sub-table').html(result);
                });
         $('#b2').click(function () {
            var data = $("#isgeo").serializeArray();
            data.push({ name: "page", value: '2' })
                $.ajax({
                    type: 'GET',
                    url: '@Url.Action("GetTable", "SubsidencePoints")',
                    data: $.param(data),
                    cache: false,
                    processData: false,
                    contentType: false
                }).done(function (result) {
                    $('#Sub-table').html(result);
                    }); 

2 个答案:

答案 0 :(得分:1)

非常简单。您所要做的就是创建一个循环来循环遍历按钮的总数,然后使用createElement创建一个按钮,然后以编程方式将事件附加到它。请查看以下代码。



a+b+c+d




答案 1 :(得分:0)

也许尝试for循环 -

$(document).ready(function () {
    for (var i = 0; i < numButtons; i++) {
        $('#b' + i).click(function () {
            var data = $("#isgeo").serializeArray();
            data.push({ name: "page", value: '1' });
            $.ajax({
                type: 'GET',
                url: '@Url.Action("GetTable", "SubsidencePoints")',
                data: $.param(data),
                cache: false,
                processData: false,
                contentType: false
            }).done(function (result) {
                $('#Sub-table').html(result);
            });
        });
    }
});

这就是你要追求的吗?