在JavaScript中创建n个按钮（或可变数量的按钮）

我是JavaScript新手，很难完成此任务。我正在编写代码来分页我的表格。现在所有与按钮相关的逻辑都是硬编码的，我想让它更具动态性。意思是，我有五个按钮，都有单独的代码来做同样的事情，我想重构我的代码，以便我有n个按钮和一个控制它们的脚本。在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); 
        });

来源

2016-08-23 Adam Reb Alloy

请尝试编写符合您所描述的代码，然后回来并询问您遇到的具体问题。 – dlsso

当然，我张贴了我的硬代码。我不知道如何生成可变数量的按钮，因为我已经做了2天的JavaScript。我不需要你写我的代码，我已经阅读了很多w3schools教程，并没有发现任何特定于这种情况的东西，这将有助于使我的代码更具动态性。如果你知道一个资源，我将不胜感激。我可能只需要使用更精确的搜索词来查找教程，或者我可能会使用错误的。 –

似乎我有足够的信息来完成任务。 –

很容易。你所要做的就是创建一个循环来遍历整个按钮的数量，然后使用createElement创建一个按钮，然后以编程方式将事件附加到它。看看下面的代码。

<div id="nav-buttons"> 
 

 
</div> 
 

 
<script> 
 
    
 
    var totalRecords = 500; 
 
var recordsPerPage = 50; 
 

 
var totalButtons = totalRecords/recordsPerPage; 
 
var navButtons = document.getElementById("nav-buttons"); 
 
    console.log(totalButtons) 
 
for (var b=0; b<totalButtons;b++) 
 
{ 
 
    var button = document.createElement("button"); 
 
    button.setAttribute("pageto", b); 
 
    button.innerHTML="Page " + b; 
 
    navButtons.appendChild(button); 
 
    
 
    button.addEventListener("click", function(event) { 
 
    var btn = event.target; 
 
    var page = btn.getAttribute("pageto"); 
 
    navButtons.appendChild(btn); 
 
    alert(page); 
 
    // goto(page) -- write your function for getting the records for page[page] 
 
    }); 
 
    
 
} 
 
    </script>

来源

2016-08-23 22:17:13 nixkuroi

谢谢。这看起来就像我需要知道的那样做。我没有看到这个createElement函数，但一直在使用getElementById和这段代码的其他部分。 –

如果你使用JQuery，你也可以这样做：var button = $（“

也许尝试一个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); 
      }); 
     }); 
    } 
});

是你以后在做什么？

来源

2016-08-23 22:19:25 ZenPylon

我不确定这会工作，因为我需要创建按钮，它们不存在。上面的帖子似乎是正确的方向。 –

我明白了。你可能需要两者的结合 - 一个创建按钮，然后一个连接'click（）'监听器 – ZenPylon

在JavaScript中创建n个按钮（或可变数量的按钮）

回答

相关问题