tr点击更改为不同的tr

时间:2015-04-13 14:04:18

标签: javascript jquery html

使用Jquery,我有一个表,点击表格行,我希望td更改为文本框或下拉列表。

输入文本框的值后,我希望将这些值更新为单击它的表行。我已经部分得到了它。

请帮我解决这个问题。

这是我的HTML代码:

<table id="myTable" >
<tr>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
 <td></td>
   </tr>
</table>

这是我的剧本:

$(document).ready(function () {
$("#myTable").children("tbody").children("tr").children("td").click(function () {
    $(this.parentNode).replaceWith('<tr><td ><textarea></textarea></td><td ><textarea></textarea></td><td ><textarea></textarea></td></tr>').appendTo($(this)).val().select().blur(function () {
        var newText = $(this).val();
        $(this).parent().text(newText);
    });
});
});

1 个答案:

答案 0 :(得分:0)

尝试这样的事情。我不检查它是否编译,这只是一个想法:

$("#myTable").children("tbody").children("tr").children("td").click(function () {
    var cell1Text = $(this).find('.cell1').text();
    $(this.parentNode).replaceWith('<tr><td><textarea class="cell1">'+cell1Text+'</textarea></td>...</tr>').appendTo($(this)).val().select().blur(function () {
        var newText = $(this).val();
        $(this).parent().text(newText);
    });
})
.blur(function () {
    var cell1Val = $(this).find('.cell1').val();
    $(this.parentNode).replaceWith('<tr class="cell1">'+cell1Val+'<td ></td>...</tr>').appendTo($(this)).val().select().blur(function () {
        var newText = $(this).val();
        $(this).parent().text(newText);
    });
});