ID select of td using JQuery

Question

What I am trying to do is onLoad essentially, find all id's of each td, that has a number 1-7 and replace it with the image that corresponds with that number ie

<td id="7" class="level">7</td>

would change the 7, the content to ...

<td id="7" class="level"><img src="../img/CL7.png" alt=""></td>

So what i have so far is as follows:

$(document).ready(function()
    {
        $("td").click(function()
        {
            var findID =$(this).attr('id');
            var replace ="<img src=\"../img/cl"+ findID +".png\" alt=''>";
            function ReplaceCellContent(findID, replace)
            {
                return $("tbody tr td.level:contains('" + findID + "')").html(replace);
            }
            var myStringArray = [1,2,3,4,5,6,7];
            var arrayLength = myStringArray.length;
            for (var i = 0; i < arrayLength; i++) {
                ReplaceCellContent(findID, replace);
        }
    });
});

So it will go, find all of the ID's of the td's onclick of each td. I want it to do this to ALL of the ids ranging from 1-7, when the page loads.

I am somewhat new to JQuery/JavaScript,I DO HAVE THE SCRIPT LINK TO JQUERY API THROUGH GOOGLE FYI, so any explanation would be greatly appreciated as well. I was trying to use the loop at the bottom to loop through all of the possible numbers and just plug them in but i can't think of how to connect each back to of its original td, which had had that ID.

the HTML Table that the JQuery needs to change looks like this, written out:

<table class="sortable">
    <thead>
        <tr>
            <th>Player Name</th>
            <th>Level</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Krack</td>
            <td id="7" class="level">7</td>
        </tr>
        <tr>
            <td>Lively</td>
            <td id="6" class="level">6</td>
        </tr>
        <tr>
            <td>Bamon Williams</td>
            <td id="6" class="level">6</td>
        </tr>
        <tr>
            <td>Sinister Char</td>
            <td id="5" class="level">5</td>
        </tr>
        <tr>
            <td>Senior BoomBox</td>
            <td id="5" class="level">5</td>
        </tr>
        <tr>
            <td>Blitzking</td>
            <td id="4" class="level">4</td>
        </tr>
        <tr>
            <td>Hadooooken</td>
            <td id="2" class="level">2</td>
        </tr>
        <tr>
            <td>Jumpman2392</td>
            <td id="2" class="level">2</td>
        </tr>
        <tr>
            <td>ALEC*</td>
            <td id="2" class="level">2</td>
        </tr>
        <tr>
            <td>Frokido</td>
            <td id="2" class="level">2</td>
        </tr>
        <tr>
            <td>B. McOxbig</td>
            <td id="2" class="level">2</td>
        </tr>
        <tr>
            <td>[MES] Koko</td>
            <td id="1" class="level">1</td>
        </tr>
        <tr>
            <td>PinkStrank</td>
            <td id="1" class="level">1</td>
        </tr>
        <tr>
            <td>papa von</td>
            <td id="1" class="level">1</td>
        </tr>
        <tr>
            <td>Nuski</td>
            <td id="1" class="level">1</td>
        </tr>
        <tr>
            <td>LunchBoxes</td>
            <td id="1" class="level">1</td>
        </tr>
        <tr>
            <td>Grenade65</td>
            <td id="1" class="level">1</td>
        </tr>
        <tr>
            <td>[MGS]TOAD</td>
            <td id="1" class="level">1</td>
        </tr>
        <tr>
            <td>NoahS</td>
            <td id="1" class="level">1</td>
        </tr>
    </tbody>
    <tfoot></tfoot>
</table>

Answer 1

jQuery is great, but I don't recommend it for everything and especially not until you really have a good understanding of JavaScript, so this solution only uses jQuery to register a function to be called when the page is ready for interaction:

 // When the document is ready, run the following function:
 $(function(){

    // Get all the TD elements:
    var allTheTDs = document.querySelectorAll("td.level");

    // Loop through the array of all the TD elements
    for(var i = 0; i < allTheTDs.length; ++i){

        // Check to see if the current TD has an ID of 7 or less
        if(allTheTDs[i].id <=7 ){

           // Remove the current content of the TD
           allTheTDs[i].innerHTML = "";

           // Create a new img element
           var img = document.createElement("img");

           // Configure the new img element to have a src attribute value
           // that is based on the id value
           img.src = "../img/CL" + allTheTDs[i].id + ".png";

           // Give the img an alt to match the src, just to show
           // it works
           img.alt = "../img/CL" + allTheTDs[i].id + ".png";

           // Append the new image into the current TD
           allTheTDs[i].appendChild(img);
        }
    }
 });

Here's a working fiddle: https://jsfiddle.net/96hkhy4j/4/

Answer 2

You may do something like this

 $(document).ready(function() { var myStringArray = [1,2,3,4,5,6,7]; for (var i = 1; i <= myStringArray.length; i++) { var findID = i; var replace ="<img src=\\"../img/cl"+ findID +".png\\" alt=''>"; ReplaceCellContent(findID, replace); } function ReplaceCellContent(findID, replace) { return $("tbody tr td.level:contains('" + findID + "')").html(replace); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="sortable"> <thead> <tr> <th>Player Name</th> <th>Level</th> </tr> </thead> <tbody> <tr> <td>Krack</td> <td id="7" class="level">7</td> </tr> <tr> <td>Lively</td> <td id="6" class="level">6</td> </tr> <tr> <td>Bamon Williams</td> <td id="6" class="level">6</td> </tr> <tr> <td>Sinister Char</td> <td id="5" class="level">5</td> </tr> <tr> <td>Senior BoomBox</td> <td id="5" class="level">5</td> </tr> <tr> <td>Blitzking</td> <td id="4" class="level">4</td> </tr> <tr> <td>Hadooooken</td> <td id="2" class="level">2</td> </tr> <tr> <td>Jumpman2392</td> <td id="2" class="level">2</td> </tr> <tr> <td>ALEC*</td> <td id="2" class="level">2</td> </tr> <tr> <td>Frokido</td> <td id="2" class="level">2</td> </tr> <tr> <td>B. McOxbig</td> <td id="2" class="level">2</td> </tr> <tr> <td>[MES] Koko</td> <td id="1" class="level">1</td> </tr> <tr> <td>PinkStrank</td> <td id="1" class="level">1</td> </tr> <tr> <td>papa von</td> <td id="1" class="level">1</td> </tr> <tr> <td>Nuski</td> <td id="1" class="level">1</td> </tr> <tr> <td>LunchBoxes</td> <td id="1" class="level">1</td> </tr> <tr> <td>Grenade65</td> <td id="1" class="level">1</td> </tr> <tr> <td>[MGS]TOAD</td> <td id="1" class="level">1</td> </tr> <tr> <td>NoahS</td> <td id="1" class="level">1</td> </tr> </tbody> <tfoot></tfoot> </table> 

Answer 3

Just replace line 3 with this..

$(document).ready(function()
    {
    $("tbody td").each(function()
        {
            var findID =$(this).attr('id');
            var replace ="<img src=\"../img/cl"+ findID +".png\" alt=''>";
            function ReplaceCellContent(findID, replace)
            {
                return $("tbody tr td.level:contains('" + findID + "')").html(replace);
            }
            var myStringArray = [1,2,3,4,5,6,7];
            var arrayLength = myStringArray.length;
            for (var i = 0; i < arrayLength; i++) {
                ReplaceCellContent(findID, replace);
        }
    });
});

Answer 4

Hi you just add jQuery and try this way

<script src="jquery-2.2.1.min.js"></script>
<script>

    $('table tr td:nth-child(2)').each(function() {
        var id =$(this).attr('id');
        $(this).html('<img src="../img/CL'+id+'.png" alt="">')


});
</script>