masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
javascript - Lintas dan ubah suai tag <td>
仅有的幸福
仅有的幸福 2017-07-05 10:57:16
0
3
900

Versi jquery: 1.8
Kod asal

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

ditukar kepada 

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

Saya cuba menambah id="img" pada <td>11,12</td>, tetapi $("#img").eq(1).html() tidak boleh mendapatkan kandungan baris kedua.

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

Saya tidak begitu mahir dengan jQuery, saya harap pakar dapat membantu membetulkan beberapa kesilapan tatabahasa, yang menyebabkan masalah kepada pakar.

仅有的幸福
仅有的幸福

membalas semua(3)
阿神
阿神2017-07-05 10:59:16 Tingkat 3

Saya tidak tahu sama ada anda lebih jelas, id adalah unik, dan hanya boleh ada satu nama id yang sama dalam halaman kod html! Jadi $("#img").eq(1)Kod sedemikian pasti tidak mematuhi spesifikasi.

Semak kod anda secara visual dan ubahnya daripada menambah id kepada menambah kelas. Selain itu, anda boleh menggunakan setiap kaedah jquery untuk melintasi nod dom 

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);
});
Suka +0
Tambah Balasan
滿天的星座
滿天的星座2017-07-05 10:59:16 Tingkat 2 
$('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);
})
Suka +0
Tambah Balasan
刘奇
刘奇2017-07-05 10:59:16 Tingkat 1

id hanya boleh unik, dan hanya dapat nilai pertama, jadi gunakan kelas

<!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>
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan