Question

我正在尝试了解如何使用Jquery选择器

https://learn.jquery.com/using-jquery-core/selecting-elements/

我有一个表，我想在模态中创建一个输入，我的困难实际上是如何正确使用选择器来访问<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>

当我点击编辑时，模态打开

模态

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

我在class="update"

中插入了$('th[class="update"]')

但这还不行

Answer 1

table.row将专门查看table元素，然后查看这些元素，查找类名.row。我相信您的情况，您希望在.row元素中查找嵌套的table类，因此您应将其更改为$('table th')。我不确定scope属性是什么，但如果您想使用.row，则可以定义<th class="row">，然后使用$('table.row')

如果你真的想使用属性scope，你也可以通过${'th[scope="row"]')

在jQuery中指定它

Answer 2

访问<th scope="row">：

var thScopeRow = $('th[scope="row"]');

Answer 3

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

$('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')会在页面上找到具有此类的所有元素。因此请将其视为数组。如果您在页面上有2个元素，并且想要获得第二个元素，那么请使用$('.row')[1]等等。

Answer 4

您可能需要查看the jQuery selectors。可以通过[attributName="desiredValue"]选择具有特定值属性的元素。

在您的情况下：$('th[scope="row"]')

选择器Jquery

4 个答案: