javascript - 使用JQuery选择td的ID

Question

我想做的本质上是 onLoad，找到每个 td 的所有 id，其中包含数字 1-7，并将其替换为与该数字对应的图像，即

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

将 7 的内容更改为 ...

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

所以到目前为止我所拥有的如下:

$(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);
        }
    });
});

这样就可以找到每个 td 的 onclick 的所有 td ID。我希望它在页面加载时对 1-7 范围内的所有 id 执行此操作。

我对 JQuery/JavaScript 有点陌生，我确实通过 GOOGLE FYI 有到 JQUERY API 的脚本链接，所以任何解释也将不胜感激。我试图使用底部的循环来遍历所有可能的数字，然后将它们插入，但我不知道如何将每个数字连接回其原始 td，该 td 具有该 ID。

JQuery 需要更改的 HTML 表如下所示，写出:

<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 很棒，但我并不推荐它用于所有情况，尤其是在您真正对 JavaScript 有很好的理解之前，因此此解决方案仅使用 jQuery 来注册一个在页面准备好进行交互时调用的函数:

 // 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);
        }
    }
 });

这是一个工作 fiddle :https://jsfiddle.net/96hkhy4j/4/