爲tds JQuery中的每個圖像動態分配唯一ID。

我想爲每個tr中的td中的所有圖像分配唯一的ID，對於每行不同的字母，然後是數字：例如tr 1，我希望所有ID都是這樣的：a1，a2，a3等。 tr 2 b1，b2，bc等IDS在tr1中的方式，這就是我想如何在Jquery中實現這一點，但卻是動態的！有人能夠以這種簡單的方式幫助我嗎？棘手的挑戰請，，謝謝你的時間！爲tds JQuery中的每個圖像動態分配唯一ID。

這是我的表

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

來源

2014-10-29 David Bukera

不知道我是否理解正確，這是你在追求什麼？ http://jsfiddle.net/5zzqvhdc/ – Chandu 2014-10-29 23:04:07

你的'snp.gif'圖像文件名中是否有空格？ – jfriend00 2014-10-30 00:30:02

就算這樣簡單：

<!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>

來源

2014-10-29 23:12:41 skobaljic

嗨，感謝這個完美的解決方案，它相應地工作;我想ID的大寫字母，我在哪裏修改？，謝謝 – 2014-10-30 13:31:27

嗨，再次感謝，我設法修改HTML圖像ID組！！我很greelful – 2014-10-30 13:36:24

很高興我幫助。您可以在javascript和css中使用數據屬性，也可以在這裏使用簡短信息（https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes） – skobaljic 2014-10-30 13:53:05

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

來源

2014-10-29 23:08:34

試試這個：

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

來源

2014-10-29 23:13:12 motanelu

爲tds JQuery中的每個圖像動態分配唯一ID。

回答

相關問題