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-й столбец в таблице является тот, который содержит ссылку (2-е точки зрения с 0).

Мой 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() на консоли, он показывает, что я ожидаю, когда столбец будет заменен.

Может кто-нибудь сказать мне, что я делаю неправильно, почему этот контент не заменяется, как я ожидал?

Ожидаемый результат должен содержать только слово Link в Col3 один раз на выходе.

JS Fiddle: https://jsfiddle.net/zrpe8c3x/2/

Answer 1

подход вы принимаете извлечения HTML-таблицы и взлома вокруг массово усложненный. Из вашего описания все, что вы пытаетесь сделать, это удалить функциональность ссылок из элементов a, но сохраните текст.Если это так, то вы можете сделать это простой Однострочник использованием unwrap():

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

Updated fiddle

Answer 2

Ваш код не работает, потому что вы инициализировать table переменную с помощью outerHTML, но вы не знаете измените его впоследствии, так что вы добавляете в конце вашего кода ту же переменную, которую вы определили ранее, без изменений, которая является той же таблицей, которую вы использовали в качестве ввода.

Это происходит потому, что у вас есть следующие проблемы в вашем код:

1. table переменными вы добавление в конце концов, является простым 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/