使用JQuery选择td的ID

Question

我想要做的是，从本质上说，找出每个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);
        }
    });
});

因此，它会去，找到所有的ID，td的每个td的点击。当页面加载时，我希望它对从1-7到1-7不等的所有it都这样做。

我对JQuery/JavaScript有点陌生，我有通过GOOGLE连接到JQUERY的脚本链接，所以任何解释都会非常感谢。我试图使用底部的循环循环遍历所有可能的数字，然后插入它们，但是我想不出如何将每个数字连接回原来的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);
        }
    }
 });

这是一个有用的小提琴：https://jsfiddle.net/96hkhy4j/4/

Answer 2

你可以做这样的事

​

$(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

用这个代替第3行..。

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