Working with jQuery to use an onclick that uses contains-CodePudding

I have 4 columns and about 10 rows in a table. I'm trying to have an onclick event that searches through the row that was clicked and removes "T" from that row but right now it's searching and removing all the "T" from the table, not just the row clicked. What should I change?

$('#table_output tbody').on('click', 'tr', function() {
    console.log(table.row(this).data());
    $(':contains("T")').each(function(){
        $(this).html($this).html().split("T").join(""));
    });
    alert(JSON.stringify(table.row(this).data()));
})

CodePudding user response：

:contains("T") will find every element that contains 'T'. I replaced that with $(this).find(':contains("T")'), which searches only within the children of the <tr> that was clicked.

You also had a few typos that I fixed, as well as some unknown variables like table, which I've commented out.

$('#table_output tbody').on('click', 'tr', function() {
    //console.log(table.row(this).data());
    $(this).find(':contains("T")').each(function(){
        //$(this).html($(this).html().split("T").join(""));
        $(this).html($(this).html().split("T").join(""))
    });
    //alert(JSON.stringify(table.row(this).data()));
})

<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>

<table id="table_output">
<tbody>
<tr>
    <td>Total</td>
    <td>Tee Time</td>
    <td>Food for Thought</td>
</tr>
<tr>
    <td>Total</td>
    <td>Tee Time</td>
    <td>Food for Thought</td>
</tr>
<tr>
    <td>Total</td>
    <td>Tee Time</td>
    <td>Food for Thought</td>
</tr>
</tbody>
</table>