jQuery替換表中的內容

Question

我有一個表格，呈現給包含網站鏈接的頁面。 這允許用戶輕松點擊它並導航等。

我正在構建一個可以將表傳遞給它的函數，它將數據導出到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>

表中的第3列是包含鏈接的列（基於0的第2列）。

我的jQuery：

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

// Loop over all of the table rows
 $(table).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).html();

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

     });

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

當我運行它時，內容是相同的，它不會刪除鏈接。 但是，如果我將$(col).text()到控制台，它會顯示我期望要替換的列。

有人可以告訴我，為什么這些內容沒有像我期望的那樣被替換，我做錯了什么？

預期結果應該只在輸出中包含一次Col3中的單詞Link 。

JS小提琴： https ： //jsfiddle.net/zrpe8c3x/2/

Answer 1

您正在采取的檢索表格的HTML並將其黑客攻擊的方法過於復雜。 從你的描述，你正在試圖做的一切是從刪除的鏈接功能a元素，但保留文本。 如果是這種情況，您可以使用unwrap()將其unwrap()簡單的單行程序：

$('#assignedOpenProjects').find('a').contents().unwrap();

更新了小提琴

Answer 2

您的代碼無效，因為您使用outerHTML初始化table變量，但之后不會對其進行修改，因此您在代碼末尾添加的內容與之前定義的變量相同，不變，這是相同的你有一個表作為輸入

這是因為您的代碼中存在以下問題：

1. 您最后附加的table變量是plain outerHTML而不是您構建和遍歷的jQuery對象

2. 你正在更改一個新的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);
});

https://jsfiddle.net/qs3mk7xn/

話雖如此，我相信你應該注意羅瑞的回答。 如果你想要他做同樣的事情，但在另一張桌子上，你可以這樣做：

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

https://jsfiddle.net/qs3mk7xn/1/

或者，更有效率，這樣的事情：

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

https://jsfiddle.net/qs3mk7xn/2/

或者，如果你只想要第三個td ，就像這樣：

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

https://jsfiddle.net/qs3mk7xn/3/