확장하고 숨기려고하는 테이블 열이 있습니다.
jQuery는 td요소 별로 이름이 아닌 클래스 별로 선택 하면 요소 를 숨기는 것 같습니다 .
예를 들어 왜 :
$(".bold").hide(); // selecting by class works
$("tcol1").hide(); // select by element name does not work아래 HTML에서 두 번째 열은 모든 행에 대해 동일한 이름을 갖습니다. name속성을 사용하여이 컬렉션을 어떻게 만들 수 있습니까?
<tr>
<td>data1</td>
<td name="tcol1" class="bold"> data2</td>
</tr>
<tr>
<td>data1</td>
<td name="tcol1" class="bold"> data2</td>
</tr>
<tr>
<td>data1</td>
<td name="tcol1" class="bold"> data2</td>
</tr>답변
jQuery 속성 선택기를 사용할 수 있습니다 .
$('td[name ="tcol1"]') // matches exactly 'tcol1'
$('td[name^="tcol"]' ) // matches those that begin with 'tcol'
$('td[name$="tcol"]' ) // matches those that end with 'tcol'
$('td[name*="tcol"]' ) // matches those that contain 'tcol'답변
[attribute_name=value]방법을 사용하여 모든 속성을 선택할 수 있습니다 . 여기 에 샘플을 참조 하십시오 :
var value = $("[name='nameofobject']");답변
다음과 같은 것이 있다면 :
<input type="checkbox" name="mycheckbox" value="11" checked="">
<input type="checkbox" name="mycheckbox" value="12">다음과 같이 모두 읽을 수 있습니다.
jQuery("input[name='mycheckbox']").each(function() {
console.log( this.value + ":" + this.checked );
});스 니펫 :
jQuery("input[name='mycheckbox']").each(function() {
console.log( this.value + ":" + this.checked );
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="mycheckbox" value="11" checked="">
<input type="checkbox" name="mycheckbox" value="12">답변
구식 방식으로 이름을 가진 요소 배열을 가져 와서 해당 배열을 jQuery에 전달할 수 있습니다.
function toggleByName() {
var arrChkBox = document.getElementsByName("chName");
$(arrChkBox).toggle();
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title>sandBox</title>
</head>
<body>
<input type="radio" name="chName"/><br />
<input type="radio" name="chName"/><br />
<input type="radio" name="chName"/><br />
<input type="radio" name="chName"/><br />
<input type="button" onclick="toggleByName();" value="toggle"/>
</body>
</html>참고 : “name”속성을 사용해야하는 이유는 확인란 또는 라디오 입력에만 해당됩니다.
또는 선택을 위해 요소에 다른 클래스를 추가 할 수도 있습니다 (이것이 내가 할 것입니다)
function toggleByClass(bolShow) {
if (bolShow) {
$(".rowToToggle").show();
} else {
$(".rowToToggle").hide();
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title>sandBox</title>
</head>
<body>
<table>
<tr>
<td>data1</td>
<td class="bold rowToToggle">data2</td>
</tr>
<tr>
<td>data1</td>
<td class="bold rowToToggle">data2</td>
</tr>
<tr>
<td>data1</td>
<td class="bold rowToToggle">data2</td>
</tr>
</table>
<input type="button" onclick="toggleByClass(true);" value="show"/>
<input type="button" onclick="toggleByClass(false);" value="hide"/>
</body>
</html>답변
jQuery에서 name 요소를 사용하여 입력 필드에서 이름 값을 가져올 수 있습니다.
var firstname = jQuery("#form1 input[name=firstname]").val(); //Returns ABCD
var lastname = jQuery("#form1 input[name=lastname]").val(); //Returns XYZ
console.log(firstname);
console.log(lastname);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" id="form1">
<input type="text" name="firstname" value="ABCD"/>
<input type="text" name="lastname" value="XYZ"/>
</form>답변
프레임 워크는 일반적으로 다음과 같은 형식 으로 대괄호 이름 을 사용합니다 .
<input name=user[first_name] />다음을 통해 액세스 할 수 있습니다.
// in JS:
this.querySelectorAll('[name="user[first_name]"]')
// in jQuery:
$('[name="user[first_name]"]')
// or by mask with escaped quotes:
this.querySelectorAll("[name*=\"[first_name]\"]")