在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個按鈕（或可變數量的按鈕）

回答

相關問題