亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使用 JQuery 編輯和更新動態表中的值?

如何使用 JQuery 編輯和更新動態表中的值?

慕沐林林 2023-08-21 19:43:52
下面是用于將輸入添加到動態表中的代碼,并且還為每一行生成一個編輯按鈕,我的問題是,當我單擊特定行的編輯按鈕時,如何將表中的值傳遞回輸入字段并然后,當我單擊更新行按鈕時,根據對輸入字段中的值所做的更改來更新特定行。$("#btnAdd").on('click', function() {  let row = '<tr> <td>' + $("#insert-name").val() + '</td> <td>' + $("#insert-surname").val() + '</td> <td>' + "edit" + '</td> </tr>'  $('tbody').append(row);  $('td:contains("edit")').html("<button type='button'>" + "edit" + "</button>").on('click', function() {  });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form>  <div>    <label for="insert-name">Name:</label>    <input type="text" id="insert-name">  </div>  <div>    <label for="insert-surname">Surname:</label>    <input type="text" id="insert-surname">  </div></form><button type="button" id="btnAdd">Add to Table</button><button type="button" id="btnUpdate">Update row</button><table>  <thead>    <tr>      <th scope="col">Name</th>      <th scope="col">Surname</th>      <th scope="col">Edit</th>    </tr>  </thead>  <tbody id="tbody"></tbody></table>
查看完整描述

2 回答

?
慕娘9325324

TA貢獻1783條經驗 獲得超4個贊

檢查這個(閱讀 JS 評論)


$("#btnAdd").on('click', function() {

    let row = '<tr> <td>' + $("#insert-name").val() + '</td> <td>' + $("#insert-surname").val() + '</td> <td>' + "edit" + '</td> </tr>'

    $('tbody').append(row);


    $('td:contains("edit")').html("<button type='button' class='edit'>" + "edit" + "</button>").on('click', function() {


        });

});


//--------------------------------------------------------//


$(document).on("click",".edit",function(){ // Click function on class '.edit' (your appended button)

    var name = $(this).parents("tr").find("td:eq(0)").html(); // Search for 'name' depending on this edit button parent.

    var surname = $(this).parents("tr").find("td:eq(1)").html(); // Search for 'surname' depending on this edit button parent.

    var rowNumber = $(this).parents("tr").index() // Get index of this edit button parent 'row'.

    $("#edit-name").val(name); // Read the name and put it  in '#edit-name' inside '.editArea'.

    $("#edit-surname").val(surname); // Read the surname and put it  in '#edit-surname' inside '.editArea'.

    $(".saveEdits").attr("for",rowNumber); // Store this row index as attribute in '.saveEdits' button to be able to pass it to the other function that saves data.

    $(".editArea").fadeIn(300); // Show the edit box.

});


$(".saveEdits").click(function(){ // Function to save data

  var rowNumber = parseInt($(this).attr("for")); // Get the row number that we already define in the prev. function.

    $('td:eq(0)','tr:eq('+(rowNumber+1)+')').html($("#edit-name").val()); // Update 'td' content depending on the 'tr' index.

    $('td:eq(1)','tr:eq('+(rowNumber+1)+')').html($("#edit-surname").val()); // Update 'td' content depending on the 'tr' index.

});


$(".cancel").click(function(){ // Button to cancel edit.

  $("#edit-name").val(""); // Empty value.

  $("#edit-surname").val(""); // Empty value.

  $(".saveEdits").attr("for","0"); // Set row number to zero.

  $(".editArea").fadeOut(300); // Hide edit area.

});

.editArea{

  display:none;

  background:#fff;

  padding:10px;

  border:1px solid #ddd;

  border-radius:5px;

  box-shadow:0 0 0 #000;

  width:50%;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!DOCTYPE html>

<html dir="ltr">

  <head>

    <meta charset="utf-8">

    <title></title>

  </head>

  <body>

    <form>

      <div>

        <label for="insert-name">Name:</label>

        <input type="text" id="insert-name">

      </div>

      <div>

        <label for="insert-surname">Surname:</label>

        <input type="text" id="insert-surname">

      </div>

    </form>


    <button type="button" id="btnAdd">

      Add to Table

    </button>



    <table>

      <thead>

        <tr>

          <th scope="col">Name</th>

          <th scope="col">Surname</th>

          <th scope="col">Edit</th>

        </tr>

      </thead>

      <tbody id="tbody">


      </tbody>

    </table>

    

    <div class='editArea'>

      <label>Name</label>

      <input type="text" id="edit-name">

      <br>

      <label>Surname</label>

      <input type="text" id="edit-surname">

      

      <hr>

      <button class='saveEdits' for="0">Save edits</button>

      <button class='cancel'>Cancel</button>

    </div>

    

  </body>

</html>


查看完整回答
反對 回復 2023-08-21
?
米脂

TA貢獻1836條經驗 獲得超3個贊

這是一個在現有輸入中編輯行的解決方案


var counter = 0;

var current_row = null;

$("#btnAdd").on('click', function() {

  if (current_row == null) {

  if ( $("#insert-surname").val().length && $("#insert-name").val().length ) {

    let row = '<tr data-row="'+counter+'"> <td>' + $("#insert-name").val() + '</td> <td>' + $("#insert-surname").val() + '</td> <td>' + "edit" + '</td> </tr>'

    $('tbody').append(row);

    counter++;

    }

  } else {

    var select_row = $('tr[data-row='+current_row+']');

    let cells = $(select_row).find('td');

    $(cells[0]).text($("#insert-name").val());

    $(cells[1]).text($("#insert-surname").val());

  }

  clear_input();


$('td:contains("edit")').html("<button type='button'>" + "edit" + "</button>").on('click', function() {

    let cells = $(this).parents('tr').find('td');

    $("#insert-name").val($(cells[0]).text());

    $("#insert-surname").val($(cells[1]).text());

    current_row = $(this).parents('tr').data('row');

  });

});


$('#btnCancel').on("click", () => clear_input());


function clear_input() {

    current_row = null;

    $("#insert-name").val('');

    $("#insert-surname").val('');

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<form>

  <div>

    <label for="insert-name">Name:</label>

    <input type="text" id="insert-name">

  </div>

  <div>

    <label for="insert-surname">Surname:</label>

    <input type="text" id="insert-surname">

  </div>

</form>


<button type="button" id="btnAdd">Add to Table</button>

<button type="button" id="btnCancel">Cancel</button>


<table id='data-table'>

  <thead>

    <tr>

      <th scope="col">Name</th>

      <th scope="col">Surname</th>

      <th scope="col">Edit</th>

    </tr>

  </thead>

  <tbody id="tbody"></tbody>

</table>


查看完整回答
反對 回復 2023-08-21
  • 2 回答
  • 0 關注
  • 141 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號