javascript - 根据单击的行更改标题值？

Question

我需要能够根据单击的行填充列标题输入。我需要使用 :nth-child 或 .eq(0) 或动态的东西来做到这一点，因为我不能在这里使用硬编码的 id。我设置了一个 fiddle 来突出显示单击的当前行，并且该行中的文本也应该成为标题输入的值。 http://jsfiddle.net/7vLdxddr/1/

jQuery

$('table').on('click', 'tr', function () {
                if ($(this).hasClass('selected')) {
                    $(this).removeClass('selected');
                }
                else {
                    $('tr.selected').removeClass('selected');
                    $(this).addClass('selected');
                }
});

HTML

<table>
    <thead>
        <tr>
            <th><input type='text' /></th>
            <th><input type='text' /></th>
            <th><input type='text' /></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>red</td>
            <td>circle</td>
            <td>1</td>
        </tr>
        <tr>
            <td>orange</td>
            <td>square</td>
            <td>2</td>
        </tr>
        <tr>
            <td>yellow</td>
            <td>triangle</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

Answer 1

您可以这样使用 for 循环进行迭代:

for(var i=0; i<$(this).find("td").length; i++)
{
        $(this).closest("table").find("th").eq(i).find("input:text").val($(this).find("td").eq(i).text())
}

更新的 fiddle :

http://jsfiddle.net/ehsansajjad465/7vLdxddr/2/

这是更易读的代码:

for(var i=0; i<$(this).find("td").length; i++)
{
      var th = $(this).closest("table").find("th").eq(i);
      var td =$(this).find("td").eq(i);
      th.find("input:text").val(td.text())
}