2017-09-26 207 views
3

我有这个HTML +这个JQuery.JS 脚本的工作原理是这样的。当您按下添加按钮时,表格将出现在表格上方,当您按下隐藏按钮时,它将隐藏它当您按下编辑按钮时,您将添加到表格输入案例中的任何文本将被添加到新的TR中,使用提交按钮创建。如何创建一个循环jquery

我现在想要做的是。在每条TD线上,我希望我的ADD/HIDE/Edit按钮重新出现,但这次按Edit时。我想编辑新TR中的新文本。 例如,我有第一个TR a,a,a,a,a我按编辑我把b,b,b,b,b提交给它一个新的TR将用bbbbb创建,当我按下Edit按钮再次在bbbbb tr上。我希望它编辑bbbbb线。我不知道如何解释它比这更好。如果你们想要idk,我可以通过Skype进入。

$(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>' + 
 
       '</tr>' + 
 
       ''); 
 
      for(var x = 1; x < $('input').length; x++) { 
 
       $('#btd' + x).val(''); 
 
      } 
 
      $('.buttons').attr('rowspan', $('tr').length); 
 
     } 
 
    }); 
 

 
    $(".hide").click(function() { 
 
     $("form").hide(); 
 
    }); 
 
    $(".add").click(function() { 
 
     $("form").show(); 
 
    }); 
 

 
    $(".edit").click(function() { 
 
     $("form").show(); 
 
     $.each($(this).parent().parent().find('td'), 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"); 
 
    }); 
 
});
<!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" style="vertical-align: top"> 
 
      <button class="add" >Add</button > 
 
      <button class="hide" >Hide</button > 
 
      <button class="edit" >Edit</button > 
 
     </td > 
 
    </tr > 
 
</table > 
 

 
</body > 
 
</html >

感谢您的帮助提前

+1

添加了一个编辑,以取代升ocal jquery脚本引用与CDN。现在,代码段不会在您运行时发出抱怨 – DMcCallum83

+0

...并且我已批准编辑,但需要其他人的批准 –

+0

酷。希望有人评论它。你提到你希望你的添加/隐藏/编辑按钮'重新出现',但从我可以看到他们永远不会消失。也许你应该更新你的OP的步骤数列表,详细说明预期的行为,或目前的行为与预期? – DMcCallum83

回答

0

同胞罗马尼亚你需要的东西是这样的:

$(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"); 
 
    }); 
 
});
<!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 >