jQuery实现input内容填充

HTML代码

    <div class="bottom">
        <input id="add" type="button" value="添加"/>
        <table border="1" width="400px">
            <tr>
                <td target="ip">192.168.1.1</td>
                <td target="port">80</td>
                <td>
                    <input type="button" value="编辑" class="edit"/>
                </td>
                <td>
                    <input type="button" value="删除"/>
                </td>
            </tr>
            <tr>
                <td target="ip">192.168.1.2</td>
                <td target="port">81</td>
                <td>
                    <input type="button" value="编辑" class="edit"/>
                </td>
                <td>
                    <input type="button" value="删除"/>
                </td>
            </tr>

            <tr>
                <td target="ip">192.168.1.3</td>
                <td target="port">82</td>
                <td>
                    <input type="button" value="编辑" class="edit"/>
                </td>
                <td>
                    <input type="button" value="删除"/>
                </td>
            </tr>
        </table>
    </div>
    <div>
        <div class="middle hide"></div>
        <div class="top hide">
            <div id="info">
                <div id="ip">主机IP：<input type="text" value="" name="ip"/></div>
                <div id="port">端口号：<input type="text" value="" name="port"/></div>
                <input id="confirm" type="button" value="确认">
                <input id="cancel" type="button" value="取消">
            </div>

        </div>
    </div>

 

jQuery代码:

<script src="static/jquery.js"></script>
<script>
    $("#add").click(function () {
        $(".hide").css("display","block");
    });
    $("#cancel").click(function () {
        $(".hide").css("display","none");
    });

    $(".edit").click(function () {
        $(".hide").css("display","block");
        var tds = $(this).parent().siblings("td");
        tds.each(function () {
            var k=$(this).attr("target");
            var v=$(this).text();
            $("input[name="+k+"]").val(v);
        });

    });
</script>

 

效果展示