单击时获取tr的所有td元素

Question

我有一个表格，当用户点击链接时，需要复制该行的内容并将其填充到其他字段中，例如编辑信息。如何将行内容填充为数组

<table id='mytable' border='1'>
    <thead>
        <th id='ID'>ID</th>
        <th id='Email'>Email</th>
    </thead>
    <tr>
        <td><a href="#">1</a></td>
        <td>abc@gmail.com</td>
    </tr>
    <tr>
        <td><a href="#">2</a></td>
        <td>xyz@gmail.com</td>
    </tr>
    <tr>
        <td><a href="#">3</a></td>
        <td>pqr@gmail.com</td>
    </tr>
</table>

jsfiddle链接

http://jsfiddle.net/keJBZ/5/

Answer 1

我不知道为什么我回答了这个问题，因为你的问题很简单。

如果要将选定行中的信息提取到数组中，可以采用以下方法：

http://jsfiddle.net/KyleMuir/keJBZ/6/

var array = new Array();

$('#mytable tr').on('click', copyIntoArray);

function copyIntoArray() {
    var self = $(this);
    var tds = self.children('td');
    array.push(tds[0].innerText, tds[1].innerText);
}

构建一个对象以推送到阵列上会很有意义，这样你就可以使用KVP或类似的东西来提供一些上下文。

修改

这是您的固定版本。不需要阵列。我还提供了“电子邮件”和“用户名”的输入ID，以便于选择。

http://jsfiddle.net/KyleMuir/keJBZ/21/

最终代码：

$('#mytable tr').on('click', setInformation);

function setInformation() {
    $("#edit").show();
    var self = $(this);
    var tds = self.children('td');
    $('#username').val(tds[1].innerText);
    $('#email').val(tds[2].innerText);
}

最终编辑？！？结果表明FireFox不支持.innerText，将其替换为jQuery以检索值。

http://jsfiddle.net/KyleMuir/keJBZ/24/

此：

$('#username').val(tds[1].innerText);
$('#email').val(tds[2].innerText);

变为：

$('#username').val($(tds[1]).text());
$('#email').val($(tds[2]).text());

希望这有帮助。

Answer 2

为每一行指定一个ID，然后在JavaScript中使用getElementById获取单击的行。然后，您还可以使用相同的函数获取该行的所有列。您可以将所有列放在var中，然后使用该var填充您想要的任何内容。