HTML5 모바일 개발을 향한 Xiaoqiang의 길(31) - JavaScript 검토 6
- 黄舟원래의
- 2017-02-04 14:32:321202검색
HTML DOM 모델: w3c dom 모델(사양)이 등장하기 전에는 각 브라우저에서 일부 DOM 작업을 지원했습니다.
객체 선택
속성: selectedIndex: 현재 사용자가 선택한 옵션의 첨자를 나타냅니다(0 Start부터). ) 길이: 옵션의 길이를 가져오거나 설정합니다. 옵션: 값은 배열이고, 각 배열 요소는 드롭다운 목록의 모든 옵션을 나타내는 옵션 개체입니다. 옵션 개체
속성: 텍스트: 옵션 설명 value: 선택한 옵션의 값: 값이 true인 경우 사용자가 이 옵션을 선택했다는 의미이며 다음과 같이 Option 개체를 생성할 수 있습니다.
var obj = new Option(text, value );
<html>
<head>
<script src="myjs.js"></script>
<script>
function f1(){
//alert($('s1').selectedIndex);
//alert($('s1').length);
var arr = $('s1').options;
for(i=0;i<arr.length;i++){
alert(arr[i].text +' '+ arr[i].value);
}
}
function f2(){
var op = new Option('武汉','wh');
$('s1').options[$('s1').options.length] = op;
}
</script>
</head>
<body>
<select id="s1" style="width:120px;" name="s1">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="xa">西安</option>
<option value="sz">深圳</option>
<option value="tj">天津</option>
</select>
<input type="button" value="点我吧" onclick="f2();"/>
</body>
</html>계단식 드롭다운 목록
<html>
<head>
<script src="myjs.js"></script>
<script>
var arr = new Array();
arr[0] = [new Option('--方向--','-1')];
arr[1] = [new Option('商务英语','en1'),
new Option('专业英语','en2')];
arr[2] = [new Option('计算机软件','comp1'),
new Option('计算机网络','comp2'),
new Option('计算机应用','comp3')];
//数组的创建放在外面执行效率更高
function change(index){
$('s2').length = 0;
for(i=0;i<arr[index].length;i++){
$('s2').options[i] = arr[index][i];
}
}
</script>
</head>
<body>
<select id="s1" style="width:120px;" onchange="change(this.selectedIndex);">
<!-- this表示绑定该事件的节点,在这里表示<select>节点-->
<option value="-1">--专业--</option>
<option value="english">英语</option>
<option value="computer">计算机</option>
</select>
<select id="s2" style="width:120px;">
<option value="-1">--方向--</option>
</select>
</body>
</html>테이블 개체는 f5d188ed2c074f8b944552db028f98a1
속성과 동일합니다. tHead: tHead 개체 반환 tFoot: tFoot 개체 반환 tBody: tBody 객체 배열 행 반환: 테이블의 모든 행 반환, TableRow 배열 메서드: var obj = insertRow(index): 인덱스에 행을 삽입하고 반환된 obj는 TableRow 객체입니다(아래 첨자는 0부터 시작) deleteRow(index) : 인덱스에서 TableRow 개체의 행을 삭제합니다.
속성과 동일: 셀: 모든 셀의 배열을 나타냅니다(TableCell 개체) 메서드: var obj = insertCell(index); 인덱스에 셀을 삽입하고 obj를 반환합니다. is TableCelldelecteCell(index): b6c5a531a458a2e790c1fd6421739d1c
<html>
<head>
<script src="myjs.js"></script>
<script>
//html dom模型做
function addRow1(){
var tr = $('t1').insertRow($('t1').rows.length);
var td1 = tr.insertCell(tr.cells.length);
var td2 = tr.insertCell(tr.cells.length);
td1.innerHTML = $('name').value;
td2.innerHTML = $('salary').value;
//tr.style.backgroundColor = 'red'; //两种样式1
//tr.className = 'selected'; //两种样式2
$('t1').rows[1].cells[1].style.backgroundColor = 'red';//把某一格加亮
}
//采用w3c dom模型做
function addRow2(){
var tr1 = document.createElement('tr');
var td1 = document.createElement('td');
var td2 = document.createElement('td');
td1.innerHTML = $('name').value;
td2.innerHTML = $('salary').value;
tr1.appendChild(td1);
tr1.appendChild(td2);
$('t1').appendChild(tr1);
}
</script>
<style>
.selected{
background-color:red;
}
</style>
</head>
<body>
<table id="t1" border="1" cellpadding="0" cellspacing="0" width="60%">
<tr><td>姓名</td><td>工资</td></tr>
<tr><td>zs</td><td>2000</td></tr>
<tr><td>ls</td><td>3000</td></tr>
<tr><td>wu</td><td>4000</td></tr>
</table><br/>
姓名：<input type="text" name="name" id="name"/>
工资：<input type="text" name="salary" id="salary"/>
<input type="button" value="添加" onclick="addRow2();"/>
</body>
</html>에 해당하는 셀 TableCell 개체 삭제 위는 Xiaoqiang의 HTML5 모바일 개발 도로(31) - JavaScript 검토 내용입니다. 6. 더 많은 관련 내용을 보려면 비용을 지불하세요. PHP 중국어 웹사이트(www.php.cn)를 주목하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.