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

从保存下拉列表中获取选定值

1 个答案: