从保存下拉菜单中获取选定的值

Question

我在表格中动态地添加一行（带有按钮和下拉列表），并且每一行都有编辑保存和删除按钮。的onclick保存按钮细胞变得不可编辑

function Save(){ 
    var par = $(this).parent().parent(); //tr 
    var isactive = par.children("td:nth-child(1)"); 
    var id = par.children("td:nth-child(2)"); 

    isactive.html(id.children(':selected').val()); 
    id.html(id.children("input[type=text]").val()); 
} 

当我点击保存按钮id字段变得不可编辑，但下拉列表进行编辑，以便任何人都可以请告诉我这样做的正确方法。

function Edit(){ 
    var par = $(this).parent().parent(); //tr 
    var isactive = par.children("td:nth-child(1)"); 
    var id = par.children("td:nth-child(2)"); 
    id.html("<input type='text' id='txtPhone' value='"+id.html()+"'/>"); 
} 

并点击编辑需要id的值在文本框中设置，但如何做同样的下拉菜单，请帮助...

Answer 1

动态插入，修改，删除，保存行HTML表格。 在这里，我创建了一个Working jsFiddle。参考jsfiddle中的代码。

HTML：

<div class="container"> 
    <h2>Table Management</h2> 
    <div class="table-responsive"> 
    <table border="1" class="table table-striped table-hover table-bordered"> 
    <tr> 
     <td>Column 1</td>  
     <td>Column 2</td> 
     <td>Edit row</td> 
     <td>save</td> 
     <td class='deleterow'>delete<div class='glyphicon glyphicon-remove'></div></td> 
    </tr> 
    <tr> 
     <td>A</td>  
     <td>test1</td> 
     <td><a href='#' class='editrow'>edit</a></td> 
     <td><a href='#' class='saverow'>save</a></td> 
     <td class='deleterow'><div class='glyphicon glyphicon-remove'></div></td> 
    </tr> 
    <tr> 
     <td>B</td>  
     <td>test2</td> <td><a href='#' class='editrow'>edit</a></td> 
     <td><a href='#' class='saverow'>save</a></td> 
     <td class='deleterow'><div class='glyphicon glyphicon-remove'></div></td> 
    </tr> 
    </table> 
    </div> 
</div> 

<hr><button class='btn btn-lg btn-primary addnewrow pull-right'>Add New <span class="glyphicon glyphicon-plus"></span></button> 

JS：

$(".deleterow").on("click", function(){ 
    var $killrow = $(this).parent('tr'); 
    $killrow.addClass("danger"); 
    $killrow.fadeOut(2000, function(){ 
     $(this).remove(); 
    }); 
}); 
$(document).on('click',".saverow",function(){ 
    var par = $(this).parent().parent(); //tr 
    var isactive = par.children("td:nth-child(1)"); 
    var id = par.children("td:nth-child(2)"); 
    isactive.html(isactive.children('select').val()); 
    id.html(id.children("input[type=text]").val()); 
}); 
$(document).on("click",".editrow", function(){ 
    var par = $(this).parent().parent(); //tr 
    var isactive = par.children("td:nth-child(1)"); 
    var id = par.children("td:nth-child(2)");  
    var prevVal = isactive.html();  
    isactive.html("<select class='seldom'/>"); 
    $('select.seldom') 
     .append($("<option>A</option>") 
     .attr("value","A") 
     .text('A'));  
    $('select.seldom') 
     .append($("<option>B</option>") 
     .attr("value","B") 
     .text('B')); 
    $('select.seldom option').each(function(){   
     if($(this).val() === prevVal){ // EDITED THIS LINE    
      $(this).attr("selected","selected");  
     } 
    }); 
    id.html("<input type='text' id='txtPhone' value='"+id.html()+"'/>"); 
}); 
function Edit(){ 
    var par = $(this).parent(); //tr 
    console.log(par); 
    var isactive = par.children("td:nth-child(1)"); 
    var id = par.children("td:nth-child(2)"); 
    console.log(id) 
    id.html("<input type='text' id='txtPhone' value='"+id.html()+"'/>"); 
} 

$(".addnewrow").on("click", function(){ 
    $('table tr:last').after("<tr><td data-qid='X'>NEW</td><td>NEW</td> <td><a href='#' class='editrow'>edit</a></td><td><a href='#' class='saverow'>save</a></td><td class='deleterow'><div class='glyphicon glyphicon-remove'></div></td></tr>"); 
});