jquery通過點擊更新按鈕更新數組與表單輸入文本

我有一個表單。當我點擊提交按鈕時，我創建了一個包含表單元素的對象。然後我將這些對象推送到一個數組中。在我用這個數組創建一個html表之後。jquery通過點擊更新按鈕更新數組與表單輸入文本

我有一個更新按鈕，你可以看到。當我點擊按鈕時，表格TD將轉動輸入，我可以改變文字。我需要做的是當我第二次點擊更新按鈕時，該數組必須更新。我該怎麼做？

main.js：

var obj = { }; 
var data, i; 
var personArray = []; 
var pageNum = 1; 
var objPerPage = 5; 

$("#submitButton").click(function() { 
    addObject(); 
    showTable(pageNum); 
    pagination(pageNum); 
    resetForm(''); 
}); 

function addObject() { 
    var obj = { }; 
    data = $('#personForm').serializeArray(); 
    for (i = 0; i < data.length; i++) { 
     obj[data[i].name] = data[i].value; 
    } 

    personArray.push(obj); 
} 

function pagination(p) { 
    var personArrayLen = personArray.length; 
    var pageNumFin = Math.ceil(personArrayLen/objPerPage); 
    if (pageNumFin > 1) { 
     $(".paging").remove(); 
     for (t = pageNumFin; t > 0; t--) { 
      $('<button type="button" id="pageId-' + t + '" class="paging">' + t + '</button>').insertAfter('#table'); 
     } 

     $('.paging').click(function() { 
      var id = $(this).attr('id'); 
      var ind = id.split('-'); 
      var pageNum = ind[1]; 
      showTable(pageNum); 
     }); 
    } 
} 

function showTable(page) { 
    var index = personArray.length; 
    var start = (page - 1) * objPerPage; 
    var finish = start + objPerPage; 
    if (finish > index) { 
     finish = index; 
    } else { 
     finish = start + objPerPage; 
    } 

    $('.personRow').remove(); 
    for (k = finish; k >= start; k--) { 
     $("table#personTable tbody").append('<tr class="personRow"><td>' + personArray[k].firstname + '</td><td>' + personArray[k].lastname + '</td><td>' + personArray[k].tc + '</td><td>' + personArray[k].birthday + '</td><td><button class="deleteButton" id="deleteRow-' + k + '">Delete</button></td><td><button class="updateButton" id="updateRow-' + k + '">Update</button></td></tr>'); 
    } 

    $(".deleteButton").click(function() { 
     var id = $(this).attr('id'); 
     var ind = id.split('-'); 
     var deleteIndex = ind[1]; 
     deleteFunction(deleteIndex); 
    }); 

    $(".updateButton").click(function() { 

     var id = $(this).attr('id'); 
     var ind = id.split('-'); 
     var updateIndex = ind[1]; 
     console.log(updateIndex); 
     $(this).parent().siblings().slice(0, 4).each(
      function() { 
       if ($(this).find('input').length) { 
        $(this).text($(this).find('input').val()); 
       } else { 
        var inputText = $(this).text(); 
        $(this).text('').append($('<input />', { 'value': inputText }).val(inputText)); 
        console.log(personArray[updateIndex].name); 
        personArray[updateIndex].name = inputText; 
       } 
      }); 
    }); 
} 

function resetForm(value) { 
    $("#firstname").val(value); 
    $("#lastname").val(value); 
    $("#tc").val(value); 
    $("#birthday").val(value); 
} 

/*Seçili öğeyi silip tabloyu gösterme fonksiyonunu çağırır*/ 
function deleteFunction(delInd) { 
    if (delInd > -1) { 
     personArray.splice(delInd, 1); 
    } 
    showTable(pageNum);  
    pagination(pageNum);  
} 

function updateFunction() { 
    $(this).parent().siblings().css('background-color', 'red'); 
    $(this).parent().siblings().each(
     function() { 
      if ($(this).find('input').length) { 
       $(this).text($(this).find('input').val()); 
      } else { 
       var t = $(this).text(); 
       $(this).text('').append($('<input />', { 'value': t }).val(t)); 
      } 
     }); 
}

的index.html：

<!DOCTYPE html> 

<html> 
    <head> 
     <title>Person Record</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link rel="shortcut icon" href=""> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

    </head> 
    <body> 
     <form id="personForm"> 
      <div> 
       <label for="firstname">Name:</label> 
       <input type="text" id="firstname" name="firstname" value="" placeholder="İsim"/> 
      </div> 
      <div> 
       <label for="lastname">Surname:</label> 
       <input type="text" id="lastname" name="lastname" value="" placeholder="Soyisim"/> 
      </div> 
      <div> 
       <label for="tc">TC:</label> 
       <input type="tel" id="tc" name="tc" value="" placeholder="TC"/> 
      </div> 
      <div> 
       <label for="birthday">Birthday:</label> 
       <input type="date" id="birthday" name="birthday" /> 
      </div> 
      <div> 
       <input type="button" value="Save" id="submitButton" /> 
      </div> 
     </form> 

     <div id="table"> 
      <h3>Tüm Kişiler</h3> 
      <table id="personTable" border="1"> 
       <thead> 
        <tr> 
         <th> Name </th> 
         <th> Surname </th> 
         <th> TC </th> 
         <th> Birthday </th> 
        </tr> 
       </thead> 
       <tbody> 
       </tbody> 
      </table>   
     </div> 

     <script type="text/javascript" src="main.js"></script> 
    </body> 
</html>

來源

2017-02-21 Furkan

我發現問題在你的代碼。你忘了從數組長度中減去1。請注意循環功能showTable。

工作代碼：

var obj = { }; 
var data, i; 
var personArray = []; 
var pageNum = 1; 
var objPerPage = 5; 

$("#submitButton").click(function() { 
    addObject(); 
    showTable(pageNum); 
    pagination(pageNum); 
    resetForm(''); 
}); 

function addObject() { 
    var obj = { }; 
    data = $('#personForm').serializeArray(); 
    for (i = 0; i < data.length; i++) { 
     obj[data[i].name] = data[i].value; 
    } 

    personArray.push(obj); 
} 

function pagination(p) { 
    var personArrayLen = personArray.length; 
    var pageNumFin = Math.ceil(personArrayLen/objPerPage); 
    if (pageNumFin > 1) { 
     $(".paging").remove(); 
     for (t = pageNumFin; t > 0; t--) { 
      $('<button type="button" id="pageId-' + t + '" class="paging">' + t + '</button>').insertAfter('#table'); 
     } 

     $('.paging').click(function() { 
      var id = $(this).attr('id'); 
      var ind = id.split('-'); 
      var pageNum = ind[1]; 
      showTable(pageNum); 
     }); 
    } 
} 

function showTable(page) { 
    var index = personArray.length; 
    var start = (page - 1) * objPerPage; 
    var finish = start + objPerPage; 
    if (finish > index) { 
     finish = index; 
    } else { 
     finish = start + objPerPage; 
    } 

    $('.personRow').remove(); 
    for (k = finish - 1; k >= start; k--) { 
     $("table#personTable tbody").append('<tr class="personRow"><td>' + personArray[k].firstname + '</td><td>' + personArray[k].lastname + '</td><td>' + personArray[k].tc + '</td><td>' + personArray[k].birthday + '</td><td><button class="deleteButton" id="deleteRow-' + k + '">Delete</button></td><td><button class="updateButton" id="updateRow-' + k + '">Update</button></td></tr>'); 
    } 

    $(".deleteButton").click(function() { 
     var id = $(this).attr('id'); 
     var ind = id.split('-'); 
     var deleteIndex = ind[1]; 
     deleteFunction(deleteIndex); 
    }); 

    $(".updateButton").click(function() { 

     var id = $(this).attr('id'); 
     var ind = id.split('-'); 
     var updateIndex = ind[1]; 
     console.log(updateIndex); 
     $(this).parent().siblings().slice(0, 4).each(
      function() { 
       if ($(this).find('input').length) { 
        $(this).html($(this).find('input').val()); 
       } else { 
        var inputText = $(this).text(); 
        $(this).text('').append($('<input />', { 'value': inputText }).val(inputText)); 
        console.log(personArray[updateIndex].name); 
        personArray[updateIndex].name = inputText; 
       } 
      }); 
    }); 
} 

function resetForm(value) { 
    $("#firstname").val(value); 
    $("#lastname").val(value); 
    $("#tc").val(value); 
    $("#birthday").val(value); 
} 

/*Seçili öğeyi silip tabloyu gösterme fonksiyonunu çağırır*/ 
function deleteFunction(delInd) { 
    if (delInd > -1) { 
     personArray.splice(delInd, 1); 
    } 
    showTable(pageNum);  
    pagination(pageNum);  
} 

function updateFunction() { 
    $(this).parent().siblings().css('background-color', 'red'); 
    $(this).parent().siblings().each(
     function() { 
      if ($(this).find('input').length) { 
       $(this).text($(this).find('input').val()); 
      } else { 
       var t = $(this).text(); 
       $(this).text('').append($('<input />', { 'value': t }).val(t)); 
      } 
     }); 
}

fiddle

PS它看起來像你需要一些框架。

來源

2017-02-21 09:53:35

當您對a，b，c，d，e，f進行排序並刪除e時，它會顯示f表頂部 – Furkan

@Furkan這是您的代碼的另一個問題。還有很多其他的錯誤。例如，用分頁。我建議你做一些重構。它會幫助你找到並解決很多問題。 –

jquery通過點擊更新按鈕更新數組與表單輸入文本

回答

相關問題