选择器 [英] Selector th Jquery

问题描述

我试图了解如何使用Jquery选择器

I'm trying to understand how to use the Jquery selector

https://learn.jquery.com/using-jquery-核心/选择元素/

我有一个表，我想在模式中创建一个输入，实际上我的困难是如何正确使用选择器来访问<th scope="row">

I have a table and I want to create an input within the modal, my difficulty actually is how to use the selector correctly to access the content of <th scope="row">

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Edit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">123</th>
      <th><a href="" data-toggle="modal" data-target="#formModal"><span class="oi" data-glyph="pencil"></span></a></th>
    </tr>
  </tbody>
</table>

当我单击编辑"时，模态会打开

When I click on edit the modal opens

模式

<div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal Form</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

       <form method="POST" style="padding:100px">

               <div id="dvInputsUpdate"></div>



          <button name='btn-update' type="submit" class="btn btn-primary">Atualizar</button>
        </form>

      </div>
    </div>
  </div>
</div>  

我尝试了$('table.row')

jQuery

    $(document).on('click', '#formModal', function() {
      var inpId = 0;
      $('#dvInputsUpdate').html('');
      $('table.row', function() {
        var chkValue = $(this).closest('th').next('td').text();
        $('#dvInputsUpdate').append($('<div class="form-group"><label >ID</label><input type="text" id="' + ("input" + inpId) + '" value="' + chkValue + '" /></div>'));

        inpId++;
      });
       return false;
    });

--- 更新 ---

非常感谢大家的回答，但您尚未解决它.我了解到html5尚不支持Scope.

Thank you all so much for the answers, but you have not solved it yet. I've learned that Scope is not yet supported by html5.

我在$('th[class="update"]')

但这还行不通

推荐答案

scope是<th>的属性，而不是类，因此正确的语法应为$('th[scope="row"]').在代码段中，我使用此方法选择了特定的th并更改了文本的颜色，例如:

scope is an attribute of <th>, not class, so the correct syntax would be $('th[scope="row"]'). In the snippet i selected this specific th using this method and changed the color of text just for example:

$('th[scope="row"]').css("color", "red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Edit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">123</th>
      <th><a href="" data-toggle="modal" data-target="#formModal"><span class="oi" data-glyph="pencil"></span></a></th>
    </tr>
  </tbody>
</table>

更新

我在th中插入了一个class ="update":$('th [class ="update"]')" 如果您正在使用<th class="row">123</th>，并且它只是页面上具有此类的一个元素，则可以通过$('.row')[0]进行获取. (需要[0]的原因是$('.row')会在具有此类的页面上找到 ALL 元素.因此，可以将其视为一个数组).例如，如果您在页面上具有此类的2个元素并想要获取第二个元素，则请使用$('.row')[1]，依此类推.

"I inserted a class="update" in th: $('th[class="update"]')" If you are using <th class="row">123</th> and it's only one element on the page with such class, you can get it via $('.row')[0]. ([0] is needed because $('.row') will find ALL elements on the page with such class. So think about it as an array). If you have for example 2 elements on the page with such class and want to get the second, so use $('.row')[1] and so on.

这篇关于选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！