Javascript 使用JQuery选择td的ID_Javascript_Jquery_Html

Javascript 使用JQuery选择td的ID

javascript jquery html

Javascript 使用JQuery选择td的ID,javascript,jquery,html,Javascript,Jquery,Html,我想做的是在线加载，找到每个td的所有id，它有一个数字1-7，并替换为与该数字对应的图像，即 <td id="7" class="level">7</td> 7 将更改7，内容为 <td id="7" class="level"><img src="../img/CL7.png" alt=""></td> 因此，我目前的情况如下： $(document).ready(function() { $("t

我想做的是在线加载，找到每个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);
        }
    });
});

$（文档）.ready（函数（）
{
$（“td”）。单击（函数（）
{
var findID=$（this.attr（'id'）；
var replace=“”；
函数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；
对于（变量i=0；i


所以它会去，找到td的所有ID，每个td的onclick。当页面加载时，我希望它对从1到7的所有ID都这样做
我对JQuery/JavaScript有些陌生，我确实有通过googlefyi链接到jqueryapi的脚本，因此任何解释都将不胜感激。我试图使用底部的循环遍历所有可能的数字，然后插入它们，但我想不出如何将每个数字连接回它原来的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>


球员姓名
水平仪
克拉克
7.
活泼的
6.
巴蒙·威廉姆斯
6.
黑炭
5.
高级音箱
5.
闪电战
4.
哈杜肯
2.
飞人2392
2.
亚历克*
2.
弗罗基多
2.
B.McOxbig
2.
[MES]科科
1.
平克斯特朗克
1.
帕帕·冯
1.
努斯基
1.
午餐盒
1.
手榴弹65
1.
[MGS]蟾蜍
1.
诺亚
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);
        }
    }
 });

//文档准备好后，运行以下函数：
$（函数（）{
//获取所有TD元素：
var allTheTDs=document.queryselectoral（“td.level”）；
//循环遍历所有TD元素的数组
对于（变量i=0；iif（allTheTDs[i].idjQuery非常好，但我并不推荐所有东西都使用它，尤其是在您真正了解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);
        }
    }
 });

//文档准备好后，运行以下函数：
$（函数（）{
//获取所有TD元素：
var allTheTDs=document.queryselectoral（“td.level”）；
//循环遍历所有TD元素的数组
对于（变量i=0；i如果（allTheTDs[i].id您可以这样做

$（文档）.ready（函数（）{
var myStringArray=[1,2,3,4,5,6,7]；
对于（var i=1；i您可以这样做

$（文档）.ready（函数（）{
var myStringArray=[1,2,3,4,5,6,7]；
对于（var i=1；iHi），您只需添加jQuery并以这种方式进行尝试
<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>


$（'table tr td:nth child（2）'）。每个（函数（）{
var id=$（this.attr（'id'）；
$（this.html（“”）
});
您好，您只需添加jQuery并尝试以下方法
<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>


$（'table tr td:nth child（2）'）。每个（函数（）{
var id=$（this.attr（'id'）；
$（this.html（“”）
});
只需将第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);
        }
    });
});

$（文档）.ready（函数（）
{
$（“tbody td”）。每个（函数（）
{
var findID=$（this.attr（'id'）；
var replace=“”；
函数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；
对于（变量i=0；i
只需将第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);
        }
    });
});

$（文档）.ready（函数（）
{
$（“tbody td”）。每个（函数（）
{
var findID=$（this.attr（'id'）；
var replace=“”；
函数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；
对于（变量i=0；i
查询选择器可以选择带有类的td吗？就像我将level作为类一样？是的，可以使用任何有效的CSS选择器。只需将“.className”传递给函数。不，它将是td.level。我已经根据Lyok thnak调整了我的答案，当我将其放入索引时，它似乎没有将数字更改为图像