Question

我想为每个tr中的td内的所有图像分配唯一的ID，每行不同的字母，后跟数字：例如tr 1，我希望所有ID都是这样的：a1，a2，a3等.tr 2 b1，b2，bc等IDS在tr1中的方式，这就是我想在Jquery中实现这一目标的动态方式！有人可以用这个简单的方式帮助我;请接受棘手的挑战，谢谢你的时间！

这是我的表

<table style="align:center">
    <tr>
     <td ColSpan="7">A </td>
     <td><img src="images/ snp.gif" id="a1" class="a"   /></td>
     <td><img src="images/ snp.gif" id="a2"  /></td>
     <td><img src="images/ snp.gif" id="a3"  /></td>
     <td><img src="images/ snp.gif" id="a3"  /></td>
     <td><img src="images/ snp.gif" id="a5"  /></td>
     <td><img src="images/ snp.gif" id="a6"  /></td>
     <td ColSpan="6"></td>
    </tr>
    <tr>
     <td ColSpan="7">B </td>
     <td><img src="images/ snp.gif" id="b1"  /></td>
     <td><img src="images/ snp.gif"   /></td>
     <td><img src="images/ snp.gif"   /></td>
     <td><img src="images/ snp.gif"   /></td>
     <td><img src="images/ snp.gif"   /></td>
     <td><img src="images/ snp.gif"   /></td>
     <td ColSpan="6"></td>
    </tr>
    <tr>
     <td ColSpan="7">C </td>
     <td><img src="images/ snp.gif" id="c1"  /></td>
     <td><img src="images/ snp.gif"   /></td>
     <td><img src="images/ snp.gif"   /></td>
     <td><img src="images/ snp.gif"   /></td>
     <td><img src="images/ snp.gif"   /></td>
     <td><img src="images/ snp.gif"   /></td>
     <td ColSpan="6"></td>
    </tr>
    <tr>

Answer 1

$('table tr').each(function(trIndex, trValue) {
    // First loop through all table rows
    $(trValue).find('td').each(function(index, value) {
        // Then loop through all tds, we skip the first one
        if( index == 0 ) {
            return true;
        }

        // Then give the td the id attribute with a String.fromCharCode 
        // This can be conveniently used to get the alphabetic characters if we add 65 (65 is A, 66 is B, etc...)
        $(value).attr('id', String.fromCharCode(trIndex+65) + index);
    });
});

http://jsfiddle.net/kje687zv/

Answer 2

这很简单：

<!doctype html>
<html>
    <head>
        <title>Unique image IDs</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript">
            jQuery.fn.addImageIDs = function(){
                return this.each(function(){
                    var thisTable = $(this);
                    var thisIdGroups = thisTable.data('imageIdGroups').split(',');
                    thisTable.find('tr').each(function() {
                        var thisRow = $(this);
                        var thisRowIdPrefix = thisIdGroups[ thisRow.index() ];
                        thisRow.find('img').each(function(i) {
                            var naturalIndex = i+1;
                            var thisImage = $(this);
                            thisImage.attr('id', '' + thisRowIdPrefix + naturalIndex);
                        });
                    });
                });
            };
            $(document).on('ready', function() {
                $('[data-image-id-groups]').addImageIDs();
            });
        </script>
    </head>
    <body>
        <table data-image-id-groups="a,b,c,d,e,f,etc.">
            <tbody>
                <tr>
                    <td><img src="images/ snp.gif" /></td>
                    <td><img src="images/ snp.gif" /></td>
                    <td><img src="images/ snp.gif" /></td>
                </tr>
                <tr>
                    <td><img src="images/ snp.gif" /></td>
                    <td><img src="images/ snp.gif" /></td>
                    <td><img src="images/ snp.gif" /></td>
                </tr>
                <tr>
                    <td><img src="images/ snp.gif" /></td>
                    <td><img src="images/ snp.gif" /></td>
                    <td><img src="images/ snp.gif" /></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Answer 3

试试这个：

$('tr').each(function() {
    var prefix = '';
    $('td', this).each(function(j) {
        var $this = $(this);
        if (j == 0) {
            // get the value in the first <td> of the <tr>
            prefix = $this.text().toLowerCase();
        } else {
            // update the next <td>s
            $this.attr('id', prefix + j);
        }
    });
});

为tds Jquery中的每个图像动态分配唯一ID。

3 个答案: