html代码

<table style="border:1px solid blue">
        <tr>
            <th>id</th>
            <th>name</th>
            <th>age</th>
            <th>sex</th>
            <th>操作</th>
        </tr>
        <tr>
            <td class="td1">1</td>
            <td class="td1">珠珠</td>
            <td class="td1">21</td>
            <td class="td1">女</td>
            <td class="td2"></td>
        </tr>
        <tr>
            <td class="td1">2</td>
            <td class="td1">琛琛</td>
            <td class="td1">18</td>
            <td class="td1">男</td>
            <td class="td2"></td>
        </tr>
    </table>

jquery代码

<script>
        var a;
        $(document).ready(function () {
            $("td[class=‘td1‘]").click(function () {
                var tdlist = $(this).parent().children();//获取td
                a = "<tr style=‘display:none‘>";
                tdlist.each(function (i) {
                    var text = tdlist.eq(i).text();
                    if (tdlist.eq(i).html().indexOf("input") < 0&&tdlist.eq(i).html().indexOf("button")<0) {
                        if (tdlist.length == (i + 1)) {
                            a+="<td><button>确定</button></td>";
                        }
                        else if (i==0) {
                            a += "<td><input type=‘text‘ readonly=‘true‘ value=http://www.mamicode.com/‘" + text + "‘></td>";
                        }
                        else {
                            a+="<td><input type=‘text‘ value=http://www.mamicode.com/‘"+text+"‘></td>";
                        }
                    }
                });
                a += "</tr>";
                $(this).parent().after(a).next().fadeIn("3000");
             });
            $(this).delegate("button", "click", function () {

                var list = $(this).parent().parent().children();//当前td的值
                var li = $(this).parent().parent();//当前tr
                list.each(function (i) {
                    var b = list.eq(i).children().eq(0).val();//当前input的值
                    var shngjitd=li.prev().children();//上一级td
                    if (list.length != (i+1)) {
                         shngjitd.eq(i).text(b);
                        li.fadeOut("3000");
                    }
                    else {
                        list.eq(i).text("");
                    }

                });

            });
      
            });
    </script>

jquery实现表格文本框淡入更改值后淡出