Question

我正在开发一个项目，要求我在单击另一个表中的等效行时，可以在表格中创建单元格。我遇到的问题是，我无法让它只在可更新表中单行编辑，而是使每行的每个单元格都可编辑。

以下是jsfiddle演示此问题的示例：http://jsfiddle.net/z9qtH/24/

在此示例中，如果单击顶部表格中的“第1行”，则下表中的第一行应将其单元格的内容替换为输入。相反，底部表格中的两行都可以编辑。

代码

HTML：

<table border="1">
<tr>
    <td class="editable">Row 1</td>
</tr>
<tr>
    <td>Row 2</td>
</tr>
</table>

<table class="updateable" border="1">
    <tr>
        <td>1 - 1</td>
        <td>1 - 2</td>
        <td>1 - 3</td>
    </tr>
    <tr>
        <td>2 - 1</td>
        <td>2 - 2</td>
        <td>2 - 3</td>
    </tr>
</table>

使用Javascript：

function replaceRowCellContentsWithInput(row) {
    $("td", row).each(function() {
        $(this).html('<input type="text" value="' + $(this).html() + '" />');
    });
}

$(document).ready(function() {
    $("td.editable").click(function() {
        var cell = $(this);
        var rowIndex = cell.parent().index();
        var table = $("table.updateable");

        replaceRowCellContentsWithInput(table.children(rowIndex));
    });
});

Answer 1

您的专栏：table.children(rowIndex)选择（可能的thead）和tbody元素。即使它们没有出现在您的HTML中，浏览器也会始终插入tbody。

如果用（例如）$('tr', table)[rowIndex]替换它，您确定实际上是在选择表格中的行。

Answer 2

您的问题出在这个特定的选择器中：

table.children(rowIndex)

儿童返回直系儿童 - <table>这是<tbody>。

因此，当您将此作为上下文使用时，无论您点击哪一行，您的循环都会点击表格中的每个<td>。

Answer 3

尝试replaceWith（）...

根据您的要求进行修改 .......

 function replaceRowCellContentsWithInput(row) {
        $("td", row).each(function() {
            $(this).replaceWith('<input type="text" value="' + $(this).html() + '" />');
        });
    }

http://jsfiddle.net/z9qtH/24/

在jQuery中使用上下文和“this”

3 个答案: