点击修改时被选中工资对应的列出现文本框？

< < <

<input type="checkbox">	姓名	性别	工资
<input type="checkbox">	tom	men	3000
<input type="checkbox">	joht	men	2500

如何通过按钮修改选中当前行的工资，点击修改时被选中工资对应的列出现文本框？

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="../script/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {

        var employeeInfor=[
            {
                id:"1",
                name:'tom',
                sex:'men',
                salar:3000
            },
            {
                id:"2",
                name:'joht',
                sex:'men',
                salar:2500
            }
        ];

        function renderEmplyeeTB(){
            var employeeHTMLs=$('<table cellpadding="0" cellspacing="0" border="1"><tbody></tbody></table>');
            employeeHTMLs.append($('<tr><td><input  type="checkbox"></td><td>姓名</td><td>性别</td><td>工资</td></tr>'));
            employeeInfor.forEach(function(item,index){
                var p=$('<tr data-employee="'+item.id+'" />')
                        .append('<td><input  type="checkbox" name="selectUserCheck" data-index="'+index+'" value="'+item.id+'"></td>')
                        .append('<td>'+item.name+'</td>')
                        .append('<td>'+item.sex+'</td>')
                        .append('<td>'+item.salar+'</td>');
                employeeHTMLs.append(p);
            });


            $('div#employeeInforDiv').append(employeeHTMLs);

        }
        
        $('button#modifyButton').on('click',function(){
            $('input[type=checkbox][name=selectUserCheck]:checked').each(function(index,item){
                var rowIndex=$(item).attr('data-index');
                var salarColumn=$('table tr[data-employee]:eq('+rowIndex+')').find('td:eq(3)');
                var currentValue=employeeInfor[rowIndex].salar;
                $(salarColumn).html('<input data-index="'+rowIndex+'" type="text" value="'+currentValue+'"/>');

            });

        });

        renderEmplyeeTB();
    });
    </script>
</head>

<body>

<div id="employeeInforDiv"></div>
<p><button id="modifyButton">修改</button></p>
</body>
</html>

点击之后把里面的3000替换成

<input type='text' value='3000'>

我一般会这么做

<!--网页部分-->
<tr>
    <td>
        <!--显示金额-->
        <div class="btn" onclick="showInput(this)">3000</div>
        
        <!--输入框-->
        <div class="input" style="display:none;"><input value='3000'></div>
    </td>
</tr>
//js部分
function showInput(tDom){
    jQuery(tDom).hide();
    jQuery(tDom).parent().find(".input").show();
}
//当然输入框还需要一个失去焦点事件 失去焦点显示把当前只赋值给按钮  并隐藏自己 显示按钮

【热门文章】

点击修改时 被选中工资对应的列出现文本框？

点击修改时被选中工资对应的列出现文本框？