Javascript jQuery替换表中的内容

我有一个表，它被呈现到包含网站链接的页面。这允许用户轻松地点击它并导航等

我正在构建一个函数，我可以将表传递给它，它将数据导出到excel

不过，第一部分是创建此表数据的变量，并从列中删除链接，只留下文本

这是我的桌子：

<table id="assignedOpenProjects">
<thead>
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Bob</td>
        <td>1234</td>
        <td><a href="http://www.google.com">Link</a></td>
    </tr>
</tbody>
</table>

当我运行此程序时，内容是相同的，并且不会删除链接。但是，如果我将

$（col）.text（）

记录到控制台，它将显示我希望该列被替换的内容

有人能告诉我我做错了什么，为什么这些内容没有像我预期的那样被替换

预期结果应该只在输出中包含Col3中的单词

链接

---

JS Fiddle:

检索表的HTML并对其进行黑客攻击的方法过于复杂。根据您的描述，您所要做的只是从

a

元素中删除链接功能，但保留文本。如果是这种情况，可以使用

unwrap（）

您的代码不起作用，因为您使用
outerHTML
初始化了
表
变量，但之后不会对其进行修改，因此您在代码末尾添加的变量与您之前定义的变量相同，没有更改，这与您作为输入的表相同

发生这种情况是因为代码中存在以下问题：

您在末尾附加的
表
变量是普通的
outerHTML
，而不是您构建和遍历的jQuery对象

您正在更改内部的新
td
对象，该对象永远不会追加到原始
td
，因此您最终更改了一些您不使用的内容

这是您的代码，已更正了这两个问题：

$('[name=clean]').click(function(){

    // Define the HTML of the table
    var table = $('#assignedOpenProjects').prop('outerHTML');

    var table2 = $(table);
    // Loop over all of the table rows
     table2.find('tbody > tr').each(function () {

        // Loop over the column that contains the link
         $(this).children("td").eq(2).each(function () {

             // Define the value of that column
             var col = $(this);

             // Replace the value with the text version
             $(col).replaceWith($(col).text());

         });

    });
    // Output the table
    $('#output').empty().append(table2);
});


话虽如此，我相信你应该注意罗里的回答。如果你想让他做同样的事情，但在不同的桌子上，你可以这样做：

$('[name=clean]').click(function(){
    $('#output').empty().append($('#assignedOpenProjects').clone().find('a').contents().unwrap().parents().last());
});

$('[name=clean]').click(function(){
    var clon = $('#assignedOpenProjects').clone();
    clon.find('a').contents().unwrap();
    $('#output').empty().append(clon);
});

$('[name=clean]').click(function(){
    var clon = $('#assignedOpenProjects').clone();
    clon.find('tbody tr td:nth-child(3) a').contents().unwrap();
    $('#output').empty().append(clon);
});


或者，更有效地说，像这样的事情：

$('[name=clean]').click(function(){
    $('#output').empty().append($('#assignedOpenProjects').clone().find('a').contents().unwrap().parents().last());
});

$('[name=clean]').click(function(){
    var clon = $('#assignedOpenProjects').clone();
    clon.find('a').contents().unwrap();
    $('#output').empty().append(clon);
});

$('[name=clean]').click(function(){
    var clon = $('#assignedOpenProjects').clone();
    clon.find('tbody tr td:nth-child(3) a').contents().unwrap();
    $('#output').empty().append(clon);
});


或者，如果您只想要第三个
td
，类似于：

$('[name=clean]').click(function(){
    $('#output').empty().append($('#assignedOpenProjects').clone().find('a').contents().unwrap().parents().last());
});

$('[name=clean]').click(function(){
    var clon = $('#assignedOpenProjects').clone();
    clon.find('a').contents().unwrap();
    $('#output').empty().append(clon);
});

$('[name=clean]').click(function(){
    var clon = $('#assignedOpenProjects').clone();
    clon.find('tbody tr td:nth-child(3) a').contents().unwrap();
    $('#output').empty().append(clon);
});

您使用的代码似乎正在运行，因此您确定您的函数正在被其他代码击中而没有被压扁吗？@AlwaysLearning-您提供的小提琴对我不起作用，即使我选择使用jQuery库，它也没有从文本中删除链接。虽然这个答案很简单，可能就是我选择的答案，我在演示中设置它的原因是因为我不想更改呈现到页面的表。不仅如此，我还将替换一些其他元素，例如

标记，并试图确定它为什么不替换循环中的表内容。这当然解决了OP的问题，但我仍然很好奇为什么替换在循环中不起作用。为什么不想“更改呈现到页面的表”？这肯定是你的代码的重点。。。？只需选择标记并使用
remove（）
：
$（'br'）。remove（）
，您就可以删除标记。显然，您的选择器需要更加具体，以仅针对您需要的标记。