使用JQuery选择td的ID

时间：2016-03-12 03:59:19

标签： javascript jquery html

我想要做的是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的td的所有ID。我希望它对页面加载时的1-7范围内的所有ID执行此操作。

我对JQuery / JavaScript有些新手，我通过GOOGLE FYI得到了与JQUERY API相关的脚本链接，所以任何解释都会受到高度赞赏。我试图使用底部的循环来遍历所有可能的数字，然后将它们插入但我无法想到如何连接每个具有该ID的原始td。 / p>

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>

4 个答案:

答案 0 :(得分：1)

jQuery很棒，但我并不推荐它用于所有内容，特别是在你真正了解JavaScript之前，所以这个解决方案只使用jQuery来注册一个在页面准备好进行交互时调用的函数： 

locationManager = [[CLLocationManager alloc]init];
locationManager.delegate = self;
locationManager.desiredAccuracy  = kCLLocationAccuracyBest;
locationManager.distanceFilter = 1000.0f;
[locationManager requestAlwaysAuthorization];
[locationManager requestWhenInUseAuthorization];
[locationManager startUpdatingLocation];

这是一个工作小提琴：https://jsfiddle.net/96hkhy4j/4/

答案 1 :(得分：1)

你可能会做这样的事情

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

答案 2 :(得分：1)

只需用第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);
        }
    });
});

答案 3 :(得分：0)

您好，您只需添加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>
相关问题
最新问题