Как очистить содержимое (tabledata) в таблице с помощью JQuery

Question

У меня есть таблица внутри <div>, связывающая данные с помощью Knockout (ko). Я хочу очистить данные, нажав кнопку. Я нашел так много примеров, как empty(), remove(), detach(), который удаляет всю таблицу, но я хочу удалить только текстовое содержимое в табличных данных (Td) при нажатии кнопки.

<div class="table-responsive" style="margin-top: 3px;" id="empTab"> 
     <table class="table table-bordered"> 
      <tbody data-bind="foreach: EmployeesModel"> 
       <tr id="EmployeeRefID" style="background-color: gainsboro"> 
        <td>PSA ID</td> 
        <td><span data-bind="text: EmployeeRefID"></span></td> 
       </tr> 
       <tr id="FirstName"> 
        <td>First Name</td> 
        <td><span data-bind="text: FirstName"></span></td> 
       </tr> 
       <tr id="LastName"> 
        <td>Last Name</td> 
        <td><span data-bind="text: LastName"></span></td> 
       </tr> 
       <tr id="Email"> 
        <td>Email</td> 
        <td><span data-bind="text: Email"></span></td> 
       </tr> 
      <tbody> 
     </table> 
     </div> 

Answer 1

Вы можете использовать:

$('#empTab td:first-child').text(''); 

для всех вторых с.в.:

$('#empTab td:nth-child(2)').text(''); 

Answer 2

Попробуйте это:

$(document).ready(function(){ 
    $("#yourButton").click(function(){ 
     $("#empTab").find("td").text(""); 
    }); 
}); 

Answer 3

Добавление к ответу @Milind Anantwar в:

<button id="btnClear" data-bind="click: clearData()">Clear</button> 


function clearData() { 
    $('#empTab td:nth-child(2)').text(''); 
}