我想爲我的錶行做一個更新按鈕。我的添加按鈕打開表格輸入框，我的隱藏按鈕隱藏它，編輯按鈕編輯表TR字段。更新表按鈕jquery

提交按鈕用我放入字段的新文本創建一個新的TR。我想要一個更新按鈕，除了提交一個。當我編輯TR Raw並在其中添加其他內容時。當我按更新改變TR文本。

幫我解決這個問題。

這是我目前的HTML/jquery.js和腳本

<!DOCTYPE html> 
 
<html > 
 
    <head > 
 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 

 
    <title ></title > 
 
    </head > 
 
<body > 
 
<form class="a" action="" method="post" hidden> 
 
    <input type="text" name="nume" id="btd1" value="" > 
 
    <input type="text" name="prenume" id="btd2" value="" > 
 
    <input type="text" name="email" id="btd3" value="" > 
 
    <input type="text" name="telefon" id="btd4" value="" > 
 
    <input type="text" name="parola" id="btd5" value="" > 
 
    <input type="button" id="submit" value="Submit" name="submit" /> 
 
</form > 
 
<table border="2" > 
 
    <tr > 
 
     <td >Vlad</td > 
 
     <td >Andrei</td > 
 
     <td >vTask</td > 
 
     <td >Ceva</td > 
 
     <td >Alceva</td > 
 
     <td class="buttons"> 
 
      <button class="add" >Add</button > 
 
      <button class="hide" >Hide</button > 
 
      <button class="edit" >Edit</button > 
 
     </td > 
 
    </tr > 
 
</table > 
 

 
</body > 
 
</html >

$(document).ready(function() { 
 
    $('#submit').on('click', function() { 
 
     var valid = true, 
 
      message = ''; 
 

 
     $('form input').each(function() { 
 
      var $this = $(this); 
 

 
      if (!$this.val()) { 
 
       var inputName = $this.attr('name'); 
 
       valid = false; 
 
       message += 'Please enter your ' + inputName + '\n'; 
 
      } 
 
     }); 
 

 
     if (!valid) { 
 
      alert(message); 
 
     } else { 
 
      $('table').append('' + 
 
       '<tr>' + 
 
       '<td>' + $('#btd1').val() + '</td>' + 
 
       '<td>' + $('#btd2').val() + '</td>' + 
 
       '<td>' + $('#btd3').val() + '</td>' + 
 
       '<td>' + $('#btd4').val() + '</td>' + 
 
       '<td>' + $('#btd5').val() + '</td>' + 
 
       '<td class="buttons" style="vertical-align: top"><button class="add" >Add</button><button class="hide" >Hide</button><button class="edit">Edit</button></td >'+ 
 
       '</tr>' + 
 
       ''); 
 
      for(var x = 1; x < $('input').length; x++) { 
 
       $('#btd' + x).val(''); 
 
      } 
 
     } 
 
    }); 
 

 
    $("body").on('click','.hide',function() { 
 
     $("form").hide(); 
 
    }); 
 
    $("body").on('click','.add',function() { 
 
     $("form").show(); 
 
    }); 
 

 
    $("body").on('click','.edit',function() { 
 
     $("form").show(); 
 
     $.each($(this).closest('tr').find('td:not(".buttons")'), function (key, val) { 
 
      $("form input[type=text]").eq(key).val($(val).text()); 
 
     }) 
 
    }); 
 

 
    $("#show").click(function() { 
 
     //$("form").show(); 
 
     //$("#btd1").val("Vlad"); 
 
     //$("#btd2").val("Andrei"); 
 
     //$("#btd3").val("vTask"); 
 
     // $("#btd4").val("Ceva"); 
 
     //$("#btd5").val("Alceva"); 
 
    }); 
 
});

來源

2017-09-26 Andrei224231

檢查這個代碼

你爲什麼不添加其他字段保存和編輯

<!DOCTYPE html> 
<html > 
    <head > 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 


    <title ></title > 
    </head > 
<body > 
<form class="a" action="" method="post" hidden> 
    <input type="text" name="nume" id="btd1" value="" > 
    <input type="text" name="prenume" id="btd2" value="" > 
    <input type="text" name="email" id="btd3" value="" > 
    <input type="text" name="telefon" id="btd4" value="" > 
    <input type="text" name="parola" id="btd5" value="" > 
    <input type="button" id="submit" value="Submit" name="submit" /> 
    <input type="button" id="save" value="Save" style="display:none;" name="save" /> 
</form > 
<table border="2" > 
    <tr> 
     <td >Vlad</td > 
     <td >Andrei</td > 
     <td >vTask</td > 
     <td >Ceva</td > 
     <td >Alceva</td > 
     <td class="buttons"> 
      <button class="add">Add</button > 
      <button class="hide">Hide</button > 
     </td > 
    </tr > 
</table > 

</body > 
</html >

Javascript代碼

$(document).ready(function(){ 
    $(".add").on("click",function(){ 
    $(".a").show(); 
    }); 
    $(".hide").on("click",function(){ 
    $(".a").hide(); 
    }); 
    $(document).on("click",".editEle",function(){ 
    row = $(this).parents("tr") 
    var field1 = row.find("td:nth-child(1)").html(); 
    var field2 = row.find("td:nth-child(2)").html(); 
    var field3 = row.find("td:nth-child(3)").html(); 
    var field4 = row.find("td:nth-child(4)").html(); 
    var field5 = row.find("td:nth-child(5)").html(); 

    update(field1,field2,field3,field4,field5); 

    }); 

    var update = function(field1,field2,field3,field4,field5){ 
    $("#btd1").val(field1); 
    $("#btd2").val(field2); 
    $("#btd3").val(field3); 
    $("#btd4").val(field4); 
    $("#btd5").val(field5); 
    $("#submit").hide(); 
    $("#save").show(); 
    }; 

    $("#save").on("click",function(){ 
    var val1 = $("#btd1").val(); 
    var val2 = $("#btd2").val(); 
    var val3 = $("#btd3").val(); 
    var val4 = $("#btd4").val(); 
    var val5 = $("#btd5").val(); 
    row.find("td:nth-child(1)").html(val1); 
    row.find("td:nth-child(2)").html(val2); 
    row.find("td:nth-child(3)").html(val3); 
    row.find("td:nth-child(4)").html(val4); 
    row.find("td:nth-child(5)").html(val5); 

    }); 


    $("#submit").on("click",function(){ 
    var val1 = $("#btd1").val(); 
    var val2 = $("#btd2").val(); 
    var val3 = $("#btd3").val(); 
    var val4 = $("#btd4").val(); 
    var val5 = $("#btd5").val(); 
    var ele = "<tr><td>"+val1+"</td><td>"+val2+"</td><td>"+val3+"</td><td>"+val4+"</td><td>"+val5+"</td><td><button class='editEle'>Edit</button></tr>"; 
    $("table").append(ele); 

    }); 



});

來源

2017-09-26 19:19:05

好Noushad阿里，我現在要做的是當我按任何原始編輯。目前這個raw被髮送到表單輸入框中。我想寫一些其他的東西，然後按下更新按鈕來更改該TR中的信息。我蝙蝠在解釋。 – Andrei224231

簡而言之，我想要做的事情就是今天寫點東西，也許在1周內，TR中的數據將發生變化，我必須對其進行編輯，而不是將其添加到底部。所以我需要提交按鈕旁邊的提交按鈕 – Andrei224231

我想正是你用Edit + Update按鈕做的，但編輯按鈕將文本放入表單輸入字段中，就像它在我的代碼和保存按鈕中所做的一樣以保存它們 – Andrei224231

更新表按鈕jquery

回答

檢查這個代碼

相關問題