Fatal编程技术网
  • javascript/
  • Javascript 如何重新获取表单中的特定行数据以进行编辑

Javascript 如何重新获取表单中的特定行数据以进行编辑

javascript jquery

Javascript 如何重新获取表单中的特定行数据以进行编辑,javascript,jquery,Javascript,Jquery,如何在表单中再次获取特定行的数据在特定文本字段中进行编辑由于我的代码提供了表单中的所有行数据，当我单击“特定行”按钮时，如何获取特定行的数据。实际上，当我点击编辑按钮时，它会添加两行数据，然后再次显示到表单中 $(document).ready(function() { var count = 1; $("#submit_Button").on('click',function() {

如何在表单中再次获取特定行的数据在特定文本字段中进行编辑由于我的代码提供了表单中的所有行数据，当我单击“特定行”按钮时，如何获取特定行的数据。实际上，当我点击编辑按钮时，它会添加两行数据，然后再次显示到表单中

$(document).ready(function()
    {
        var count         = 1;
        $("#submit_Button").on('click',function()
        {       
            var fname_Field   = $("#fname1").val();
            var lname_Field   = $("#lname1").val();
            var address_Field = $("#address1").val();


            if($("#fname1").val() == null ||$("#fname1").val() == "" && $("#lname1").val() == null ||$("#lname1").val() == "" && $("#address1").val() == null ||$("#address1").val() == "" )
            {
                alert("Please fill the form");
            }           

            $(".above_Info").append('<tr class="tr_Number"><td id="count_Field">'+count+'</td><td class="first_Name">'+fname_Field+'</td><td class="last_Name">'+lname_Field+'</td><td class="addr">'+address_Field+'</td><td id="button_Edit"><input type="button" name="edit" class="edit_Button"  value="Edit"/></td></tr>');
            count++;
        });




        $(document).on('click',".edit_Button",function()
        {   
            var row     = $("#tbl > tbody > tr").length;        
            var fname   = $("#tbl").find(".first_Name").text();                 
            var lname   = $("#tbl").find(".last_Name").text();              
            var addrs   = $("#tbl").find(".addr").text();       
            var x       = $("#fname1").val(fname);      
            var y       = $("#lname1").val(lname);  
            var z       = $("#address1").val(addrs);                
        });
    });

    </script>
    <style>
    .form{margin-left:200px;
    }

    #address1{margin-left:25px;}
    #fname1, #lname1{margin-left:9px;
    }
    #submit_Button{
        margin-left:95px;
    }    
    .above_Info{margin-left:200px;
                 width:auto;
                 height:auto;
                 border:1px solid #000;
    }   
    </style>
    </head>
    <body>
    <form name="myForm" class="form">
    First Name :<input type="text" name="fname"   id="fname1"   /><br />
     Last Name :<input type="text" name="lname"   id="lname1"   /><br />
       Address :<input type="text" name="address" id="address1" /><br /><br /><br />
    <input type="button" name="Submit" value="Submit" id="submit_Button" />
    </form>
    <br />
    <br />
    <br />
    <table class="above_Info" id="tbl">
    </table>
    </body>
    </html>

$（文档）.ready（函数（）
{
var计数=1；
$（“#提交按钮”）。在（'单击'，函数（）上
{       
var fname_Field=$（“#fname1”）.val（）；
var lname_Field=$（“#lname1”）.val（）；
var address_Field=$（“#address1”）.val（）；
如果（$（“#fname1”）.val（）==null | |$（“#fname1”）.val（）==”&&$（“#fname1”）.val（）==null | |$（“#lname1”）.val（）==”&$（“#地址1”）.val&==null | |$（“#地址1”）.val=”）
{
提醒（“请填写表格”）；
}           
$（“.over_Info”）。追加（“”+计数+“”+fname_字段+“”+lname_字段+“”+地址_字段+“”）；
计数++；
});
$（文档）。在（'单击'，“.edit_按钮”，函数（）上
{   
变量行=$（“#tbl>tbody>tr”）。长度；
var fname=$（“#tbl”）.find（“.first_Name”）.text（）；
var lname=$（“#tbl”）.find（“.last#u Name”）.text（）；
var addrs=$（“#tbl”）.find（“.addr”）.text（）；
var x=$（“#fname1”）.val（fname）；
变量y=$（“#lname1”）.val（lname）；
var z=$（“#地址1”）.val（地址）；
});
});
.表格{左边距：200px；
}
#地址1{左边距：25px；}
#fname1，#lname1{左边距：9px；
}
#提交按钮{
左边距：95px；
}    
.以上信息{左边距：200px；
宽度：自动；
高度：自动；
边框：1px实心#000；
}   
名字：

姓氏：

地址：
您需要在单击按钮的
$（此）
上下文中执行此操作：

$(document).on('click',".edit_Button",function(){ 
    // var row     = $("#tbl > tbody > tr").length; 
    var $tr     = $(this).closest("tr");       
    var fname   = $tr.find(".first_Name").text(); 
    var lname   = $tr.find(".last_Name").text();              
    var addrs   = $tr.find(".addr").text();
    $("#fname1").val(fname);      
    $("#lname1").val(lname);  
    $("#address1").val(addrs);                
});
根据您的新评论，您必须清空doc ready上的输入，如：

$(document).ready(function(){
    $("#fname1, #lname1, #address1").val(''); 

    // all other code as is.

});
您需要在单击按钮的
$（this）
上下文中执行此操作：

$(document).on('click',".edit_Button",function(){ 
    // var row     = $("#tbl > tbody > tr").length; 
    var $tr     = $(this).closest("tr");       
    var fname   = $tr.find(".first_Name").text(); 
    var lname   = $tr.find(".last_Name").text();              
    var addrs   = $tr.find(".addr").text();
    $("#fname1").val(fname);      
    $("#lname1").val(lname);  
    $("#address1").val(addrs);                
});
根据您的新评论，您必须清空doc ready上的输入，如：

$(document).ready(function(){
    $("#fname1, #lname1, #address1").val(''); 

    // all other code as is.

});
当我点击提交时，如何得到空字段，因为在这个代码中它被赋予了这些值，但是这些值没有得到VISHONN DOC就绪，只填充空白值：<代码> $（“yf.fNAME1，γ-LNAME1，αAdvrs1”）.Val'（′）；你能详细说明一下吗。我应该在结尾或就绪函数的什么地方写下这句话？@Shanky是你详细阐述的时候了。你最后的评论无助于理解发生了什么。@Shanky实际上这是一个新问题，最好问一个新问题。因为这个答案是针对一个不同的问题。我希望你得到它。当我点击提交时，如何得到空字段，因为在这个代码中，它被赋予了这些值，但是这些值没有得到VISHONN DOC就绪，只填充空白值：<代码> $（“γfnAME1，αLnNeM1，αAdvrs1”）.Val'（′）；你能详细说明一下吗。我应该在结尾或就绪函数的什么地方写下这句话？@Shanky是你详细阐述的时候了。你最后的评论无助于理解发生了什么。@Shanky实际上这是一个新问题，最好问一个新问题。因为这个答案是针对一个不同的问题。我希望你能得到它。