search

Home  >  Q&A  >  body text

javascript - Traverse and modify <td> tags

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.

仅有的幸福仅有的幸福2700 days ago894

reply all(3)I'll reply

  • 阿神

    阿神2017-07-05 10:59:16

    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);
});

    reply
    0
  • 滿天的星座

    滿天的星座2017-07-05 10:59:16

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

    reply
    0
  • 怪我咯

    怪我咯2017-07-05 10:59:16

    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>

    reply
    0
  • Cancelreply