DOM에 설정한 value를 val()로 취할 수 없을 때의 해결책
개요
우선 DOM 태그에 id와 value를 추가하고 jQuery의 $("#id").val()에서 얻으려고하면 잘못되었을 때의 메모.
환경
상세
경위
「『3월 14일』이라고 표시된 날짜의 셀을 선택했을 때『0314』라는 문자열을 javascript측에 건네주고 싶다」라고 하는 것이 있었다.jQuery에 대해서는 「일단 요소에 id를 지정해 value에 값을 넣으면 $("#id").val()로 취득할 수 있다」 정도의 이해였으므로,
<td id="date1" value="0314">3月14日</td>
라고 쓰고,
$("#date1").val()
로 취하려고 하면 빈 문자열 밖에 취득할 수 없어 「???」가 되었다.
조사
간단한 테스트 파일과 스크립트를 작성하여 거동을 확인해 본다.
test.html<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="test.js"></script>
<table>
<thead></thead>
<tbody>
<tr id="tr" value="tr">
<th id="th" value="th">ヘッダ</th>
<td id="td" value="td">データ</td>
</tr>
</tbody>
</table>
<div id="div" value="div">div</div>
<span id="span" value="span">span</span><br>
<input type="selectbox" id="selectbox" value="selectbox"><br>
<input type="radio" id="radio" value="radio"><br>
<button id="button" onclick="displayValue();">value</button><br>
</body>
</html>
test.jsfunction displayValue(){
console.log($("#tr").val());
console.log($("#th").val());
console.log($("#td").val());
console.log($("#div").val());
console.log($("#span").val());
console.log($("#selectbox").val());
console.log($("#radio").val());
}
「value」버튼을 클릭해 취득할 수 있는 값을 확인.
…… selectbox 와 radio 밖에 취득할 수 없다.
원인
조사해 보면, 원래 value 속성은 input 등의 일부의 요소로 밖에 정의되고 있는 것 같다.td 또는 div 또는 value를 추가해도 사용자 정의 속성이므로 .val()에서는 값을 얻을 수없는 것 같습니다.
참고: htps : ///레후오렌세. hyper-xt. 오 rg / html 5 / 아 t 리부테 / ゔ ぅ
해결 방법
사용자 정의 속성에 대한 값을 얻으려면 .val() 대신 .attr("value")로 지정할 수 있습니다.
(rewrite)test.jsfunction displayValue(){
console.log($("#tr").attr("value"));
console.log($("#th").attr("value"));
console.log($("#td").attr("value"));
console.log($("#div").attr("value"));
console.log($("#span").attr("value"));
console.log($("#selectbox").attr("value"));
console.log($("#radio").attr("value"));
}
value 버튼을 클릭합니다.
무사히 취득할 수 있었다.
후일담
HTML5에는 「독자 데이터 속성」이라고 하는 것이 있어, 아무래도 이것을 사용하는 것이 정공법인 것 같다.
<td id="date1" data-value="0314">3月14日</td>
값을 취득하려면 .data() 를 사용하면 OK.
$("#date1").data("value")
참고: htps //wp. 라고 ch-sty ぇ. 인후 / 아 r ゔ s / 102
htps : // m / 가다랭이 / ms / c29b61b35d4919493 06
요약
<td id="date1" value="0314">3月14日</td>
$("#date1").val()
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="test.js"></script>
<table>
<thead></thead>
<tbody>
<tr id="tr" value="tr">
<th id="th" value="th">ヘッダ</th>
<td id="td" value="td">データ</td>
</tr>
</tbody>
</table>
<div id="div" value="div">div</div>
<span id="span" value="span">span</span><br>
<input type="selectbox" id="selectbox" value="selectbox"><br>
<input type="radio" id="radio" value="radio"><br>
<button id="button" onclick="displayValue();">value</button><br>
</body>
</html>
function displayValue(){
console.log($("#tr").val());
console.log($("#th").val());
console.log($("#td").val());
console.log($("#div").val());
console.log($("#span").val());
console.log($("#selectbox").val());
console.log($("#radio").val());
}
function displayValue(){
console.log($("#tr").attr("value"));
console.log($("#th").attr("value"));
console.log($("#td").attr("value"));
console.log($("#div").attr("value"));
console.log($("#span").attr("value"));
console.log($("#selectbox").attr("value"));
console.log($("#radio").attr("value"));
}
<td id="date1" data-value="0314">3月14日</td>
$("#date1").data("value")
.val()에서 얻을 수있는 value 속성은 input와 같은 일부 요소에만 있습니다 td 나 div 등의 요소에 value 속성을 주었을 경우는 .attr("value")로 취득할 수 있다 .data()를 사용합시다 Reference
이 문제에 관하여(DOM에 설정한 value를 val()로 취할 수 없을 때의 해결책), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Shiratsuki_Kurom/items/ecc9ff63519e0fb33941텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
