Community Learn Tools Library Leisure
search
English
javascript - Traverse and modify <td> tags
仅有的幸福
仅有的幸福 2017-07-05 10:57:16
0
3
899

jquery version:1.8
Original code

<tr>
<td>1</td>
<td>11,12</td>
</tr>
<tr>
<td>2</td>
<td>21,22</td>
</tr>

changed to 

<tr>
<td>1</td>
<td><a>11</a><a>12</a></td>
</tr>
<tr>
<td>2</td>
<td><a>21</a><a>22</a></td>
</tr>

Tried to add id="img" to <td>11,12</td>, but $("#img").eq(1).html() cannot get it The content of the second line.

for(var i=0; $("#img").length; i++){
   //$("#img").eq(i).html需要非空判断
    var arr= $("#img").eq(i).html.spilt();
    var str;
    for(var j=0; aar.length; j++){
        str = "<a>"+arr[j]+"</a>";
    }
    $("#img").eq(i).html(str);
}

I’m not very familiar with jQuery. I hope experts can help correct some grammatical errors, which is causing trouble for experts.

仅有的幸福
仅有的幸福

reply all(3)
阿神
阿神2017-07-05 10:59:16 3 floor

I don’t know if you are clearer, id is unique, and there can only be one same id name in an html code page! So code like $("#img").eq(1) definitely does not comply with the specification.

Visually check your code and change it from adding id to adding class. There is no problem. In addition, you can use jquery's each method to traverse dom nodes: 

var $img = $('.img');'
$img.each(function(index,item){
    var aar = $(item).text().split(','),
       str = '';
    arr.forEach(function(item1,index1){
        str = "<a>"+item1+"</a>";
    });
   $(item).html(str);
});
Like +0
Add Reply
滿天的星座
滿天的星座2017-07-05 10:59:16 2 floor 
$('tr').each(function(){
    var _arr = $(this).children("td:eq(1)").html().split(",");
    var _str = "";
    for(var i in _arr){
        _str +="<a>"+_arr[i]+"</a>"
    }
    $(this).children("td:eq(1)").html(_str);
})
Like +0
Add Reply
刘奇
刘奇2017-07-05 10:59:16 1 floor

id can only be unique, and can only get the first value, so use class

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>test</title>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<body>
  <table>
    <tr>
      <td>1</td>
      <td>11,12</td>
    </tr>
    <tr>
      <td>2</td>
      <td>21,22</td>
    </tr>
   </table>
</body>
<script type="text/javascript">
$(function () {
  $('tr').each(function(){
    $(this).addClass("img");    // 这里加入class
    var dom = $(this).find("td").eq(1);
    dom.each(function () {
    var arr = $(this).html().split(",");
    var len = arr.length;
    var str = '';
    for (let i = 0; i < len; i++) {
        str += '<a>' + arr[i] + "</a>"
    }
    console.log($(this), len, str);
    $(this).html(str);
  });
});

  // 这里你可以输出来看看
  console.log($(".img").eq(1).html())
})
</script>
</html>
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template