向每一行追加一个新列，其文本相当于第一列值？

Question

注意：我没有创建此 table，我是一名最终用户，试图让我的生活更轻松。

我需要做的是将这个table复制到excel，但是第一列和第二列是输入框样式。

我想在行的末尾创建一个新列，该列与第一列的值完全相同，但在文本中，因此我可以复制并排序 excel。

我在 Greasemonkey 中尝试过，但没有成功：

$("tr").append("<td>rows[1].innerHTML</td>")

这里是 HTML:

<form method="post">
<table width="100%" border="1">
    <tbody>
        <tr>
            <td width="30%">Document Name</td>
            <td>File Name</td>
            <td>Last Updated</td>
            <td>Email Target</td>
        </tr>
        <input type="hidden" name="documentId" value="5723">
    </tbody>
    <tbody>
        <tr>
            <td>
                <input type="text" size="30" name="name_5723" value="document1">
            </td>
            <td>
                <input type="text" size="30" name="fileName_5723" value="document1.pdf">
            </td>
            <td>05/26/2015 10:40 AM</td>
            <td>
                <a href="mailto:document+5723@mega.com">document+5723@mega.com</a>
            </td>
        </tr>
        <input type="hidden" name="documentId" value="5722">
    </tbody>

所需的输出看起来像这样：

Answer 1

jsBin demo

$("tr").append(function(){
  return $("td:eq(0)", this).clone();
});

P.S：请注意，通过简单地使用 $("tr") 作为选择器可能会定位页面上不需要的 TR 元素，请确保向您的 table 添加一个 ID，例如：

<table id="myTable">

并在 jQuery 中使用它：$("#myTable tr")

Answer 2

关于问题代码的一些说明：

您需要更好的选择器。 $("tr") 范围太广，页面上的每个 table 都会改变！
您需要考虑 header 行。
如果您的页面是 AJAX-driven，您必须使用 AJAX 感知技术，否则脚本将看不到您关心的 table。

也就是说，这里是 一个完整的 Greasemonkey/Tampermonkey 脚本，它将在问题中提供的 HTML 后附加一个文本列：

// ==UserScript==
// @name     _Append text column
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

waitForKeyElements (
    "form > table:contains('Document Name') tr", appendTextColumn
);

function appendTextColumn (jNode) {
    var firstCol    = jNode.find ("td:eq(0)");
    var cellContent = firstCol.find ("input").val ()  ||  firstCol.text ();

    jNode.append ('<td>' + cellContent + '</td>');
}

仅适用于静态页面的等效代码:

var targTable   = $("form > table:contains('Document Name')");
if (targTable.length !== 1)
    alert ('GM script error:  Expected 1 document table but found ' + targTable.length + '!');

targTable.find ("tr").append (function (idx){
    var firstCol    = $("td:eq(0)", this);
    if (idx === 0)
        return '<td>' + firstCol.text () + '</td>'

    return '<td>' + firstCol.find ("input").val () + '</td>'
} );

var targTable   = $("form > table:contains('Document Name')");
if (targTable.length !== 1)
    alert ('GM script error:  Expected 1 document table but found ' + targTable.length + '!');

targTable.find ("tr").append (function (idx){
    var firstCol    = $("td:eq(0)", this);
    if (idx === 0)
        return '<td>' + firstCol.text () + '</td>'

    return '<td>' + firstCol.find ("input").val () + '</td>'
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form method="post">
<table>
    <tbody>
        <tr>
            <td width="30%">Document Name</td>
            <td>File Name</td>
            <td>Last Updated</td>
            <td>Email Target</td>
        </tr>
        <input type="hidden" name="documentId" value="5723">
    </tbody>
    <tbody>
        <tr>
            <td>
                <input type="text" size="30" name="name_5723" value="document1">
            </td>
            <td>
                <input type="text" size="30" name="fileName_5723" value="document1.pdf">
            </td>
            <td>05/26/2015 10:40 AM</td>
            <td>
                <a href="mailto:document+5723@mega.com">document+5723@mega.com</a>
            </td>
        </tr>
        <input type="hidden" name="documentId" value="5722">
    </tbody>
</table>
</form>

向每一行追加一个新列，其文本相当于第一列值？

Append a new column, to each row, with text equivalent of the first column value?

html

javascript

jquery

greasemonkey