javascript - OnClick 表 td 变量未在 Ajax 中读取

Question

我遇到了麻烦，为什么在我的控制台中没有反映其他 td 值title，date它只反映了id我的表。如果有人能弄清楚我在哪里做错了，那就太好了。非常感谢你

表体

<tbody>
   {% csrf_token %}
   {% for folder in folder_list %}
<tr>
    <td> <a href="#" data-role="updategalleryss" data-id="{{ folder.id }}"><i class="fas fa-edit fa-lg"></i></a></td>
    <td data-target="title">{{folder.title}}</td>
    <td data-target="date_upload">{{folder.date_upload}}</td>
</tr>

{% endfor %}
</tbody>

脚本

$(document).on('click', 'a[data-role=updategalleryss]', function(){

   var id = $(this).data('id');
   var title = $('#'+id).children('td[data-target=title]').text();
   var dateto = $('#'+id).children('td[data-target=date_upload]').text();

   console.log(id) #it only read this
   console.log(title)
   console.log(dateto)
});

标签： javascripthtmlajax

Answer 1

您可以使用从单击标记的$(this).parent("td").siblings()其他 tds 获取数据。a

演示代码：

$(document).on('click', 'a[data-role=updategalleryss]', function() {

  var id = $(this).data('id');
  //use this ->parent td -> siblings
  var title = $(this).parent("td").siblings('td[data-target=title]').text();
  var dateto = $(this).parent("td").siblings('td[data-target=date_upload]').text();

  console.log(id)
  console.log(title)
  console.log(dateto)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>

    <tr>
      <td> <a href="#" data-role="updategalleryss" data-id="1"><i class="fas fa-edit fa-lg">edit</i></a></td>
      <td data-target="title">somthing</td>
      <td data-target="date_upload">ok</td>
    </tr>
    <tr>
      <td> <a href="#" data-role="updategalleryss" data-id="2"><i class="fas fa-edit fa-lg">edit</i></a></td>
      <td data-target="title">somthing2</td>
      <td data-target="date_upload">ok2</td>
    </tr>
    <tr>
      <td> <a href="#" data-role="updategalleryss" data-id="3"><i class="fas fa-edit fa-lg">edit</i></a></td>
      <td data-target="title">somthing3</td>
      <td data-target="date_upload">ok3</td>
    </tr>

  </tbody>
</table>