dom的高级操作问题
 |
zl07
2009-07-26
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <!--生成的表格--> <table class="tbl" id="tbl" border="1" width="100%"><tbody> <tr class="alt" align="center"> <td class="editor"><span>用户ID</span></td> <td class="editor" align="center"><span>用户名</span></td> <td class="editor" align="center"><span>联系人</span></td> <td class="editor" align="center"><span>地址</span></td> <td class="editor" align="center"><span>电话</span></td> <td class="editor" align="center"><span>机型</span></td> <td class="editor" align="center"><span>使用频率</span></td> <td class="editor" align="center"><span>费用</span></td></tr> <tr align="center"> <td class="editor"><span>1</span><input style="display: none;" value="1" id="1" name="1" type="checkbox"></td> <td class="editor" align="center"><span style="display: block;">物业</span><input style="display: none;" value="物业" size="12" id="name1" name="name1" type="text"></td> <td class="editor" align="center"><span>暂无</span><input style="display: none;" value="暂无" size="12" id="user1" name="user1" type="text"></td><td class="editor" align="center"><span>迎宾大道</span><input style="display: none;" value="迎宾大道" size="12" id="address1" name="address1" type="text"></td> <td class="editor" align="center"><span>暂无</span><input style="display: none;" value="暂无" size="12" id="phone1" name="phone1" type="text"></td> <td class="editor" align="center"><span>1111</span><input style="display: none;" value="1111" size="12" id="models1" name="models1" type="text"></td> <td class="editor" align="center"><span>4000</span><input style="display: none;" value="4000" size="12" id="amount1" name="amount1" type="text"></td> <td class="editor" align="center"><span>2400</span><input style="display: none;" value="2400" size="12" id="costs1" name="costs1" type="text"></td> </tr> <tr class="alt" align="center"> <td class="editor"><span>2</span><input style="display: none;" value="2" id="2" name="2" type="checkbox"></td> <td class="editor" align="center"><span>洪森</span><input style="display: none;" value="洪森" size="12" id="name2" name="name2" type="text"></td> <td class="editor" align="center"><span>暂无</span><input style="display: none;" value="暂无" size="12" id="user2" name="user2" type="text"></td> <td class="editor" align="center"><span>暂无</span><input style="display: none;" value="暂无" size="12" id="address2" name="address2" type="text"></td> <td class="editor" align="center"><span>暂无</span><input style="display: none;" value="暂无" size="12" id="phone2" name="phone2" type="text"></td> <td class="editor" align="center"><span>2222</span><input style="display: none;" value="2222" size="12" id="models2" name="models2" type="text"></td> <td class="editor" align="center"><span>500</span><input style="display: none;" value="500" size="12" id="amount2" name="amount2" type="text"></td> <td class="editor" align="center"><span>500</span><input style="display: none;" value="500" size="12" id="costs2" name="costs2" type="text"></td></tr> </tbody></table> </body> </html> 这段代码只能实现单击td来显示input。有没好的办法实现单击tr显示所有该tr下的input？ |
 |
birdbiena
2009-07-29
坐个所谓的沙发，给你解决了，在你的TR上加上ID就可以解决了
不多解释了 |
|
birdbiena
2009-07-29
看看是不是你的需求，给个回复
|
|
birdbiena
2009-07-29
你也可以这么写，在点一次又可以在变回去，还可以把
|
|
birdbiena
2009-07-29
改第三次了，给你我的最后一个写法，其它功能你都可以自己实现了
document.onmousedown = cilckTR;
function cilckTR() {
try {
var stata = "";
var eventSrcByID = event.srcElement.parentElement.id;
var tableByID = document.getElementById('tbl')
.getElementsByTagName('TR');
for (var j = 1; j < tableByID.length; j++) {
var tableByID_id = tableByID[j].id;
if (eventSrcByID == tableByID_id) {
stata = document.getElementById(tableByID_id)
.getElementsByTagName('input');
if (stata[0].style.display == 'none') {
for (var i = 0; i < stata.length; i++) {
stata[i].style.display = 'block';
}
} else {
for (var i = 0; i < stata.length; i++) {
stata[i].style.display = 'none';
}
}
}
}
} catch (exception) {
}
}
|
|
zl07
2009-07-29
呵呵`谢谢了``我用的类似的方法`,但是没用id的方法。
还是先获取TR元素，然后遍历。双击触发事件。 var rows = document.getElementById('tbl').getElementsByTagName('tr');
for (var i=1,len=rows.length;i<len;i++) {
Event.add(rows[i],"dblclick",function() {zTable.editor(this,fun); });
}
根据上面的传参指定范围，获取TD元素，`遍历```最后判断显示`或隐藏``` 嘿嘿`` 目前看来少写一个for循环` |
