Question

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

我需要做的是将此表复制到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>

期望的输出看起来像这样：
desired output

Answer 1

关于问题代码的一些注释：

你需要一个更好的选择器。 $("tr")过于宽泛，会改变页面上的每个表格！
您需要考虑标题行。
如果您的页面是由AJAX驱动的，则必须使用AJAX识别技术，否则脚本将无法看到您关注的表格。

那就是说，这里是一个完整的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>

Answer 2

<强> jsBin demo

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

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

<table id="myTable">

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

在每行中附加一个新列，其中的文本等效于第一列值？

2 个答案: