问题描述
我试图了解如何使用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">×</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.
这篇关于选择器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!