我的搜索被证明是徒劳的,我希望有人能给我一些帮助。我对javascripting也很陌生。
我已经建立了一个由几个 DIV 标签组成的网站,中间有一个 iFRAME。我已经设置了一个 Javascript,它在 iframe 的 HTML 页面中加载一个表格。每行的第一个单元格包含一个名称。
我希望能够单击每一行并返回第一个单元格中的名称。现在我一直在使用警报功能来确定我的代码是否正常工作。
这是我的 iframe 源代码:
<script type="text/javascript" src="./cgi-bin/jquery-1.8.2.min.js"></script>
<script language="Javascript">
function xmlhttpGetVMList(strURL) {
var xmlHttpReqVMList = false;
var self = this;
// Mozilla/Safari/Chrome
if (window.XMLHttpRequest) {
self.xmlHttpReqVMList = new XMLHttpRequest();
}
//IE
else if (window.ActiveXObject) {
self.xmlHttpReqVMList = new ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReqVMList.open('GET', strURL, true);
self.xmlHttpReqVMList.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
self.xmlHttpReqVMList.onreadystatechange = function() {
if (self.xmlHttpReqVMList.readyState == 4) {
updatepage(self.xmlHttpReqVMList.responseText);
}
}
self.xmlHttpReqVMList.send(null);
}
function updatepage(str) {
document.getElementById("result").innerHTML = str;
}
$("#result").ready(function() {
JavaScript:xmlhttpGetVMList("./cgi-bin/db_list_vm.cgi");
//alert('Script DIV loaded'); // <-- useful to confirm the event has completed.
});
$("#result").ready(function () {
var table = document.getElementById('VMList'),
cells = table.getElementByTagName('td');
for (var i=0,len=cells.length; i<len; i++){
cells[i].onclick = function() {
alert(this.innerText);
}
}
});
</script>
<html>
<head>
<link href="./styles/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="countleft"></div>
<div id="countright"> <b>VM Count: </b></div>
<br>
<br>
<form name="f1">
<div id="result">Loading ......<img src="./images/loading.gif" alt="loading"></img></div>
</form>
</body>
</html>
上面的代码运行并使用以下内容填充DIV ID结果的innerText:
<table id="VMList">
<thead>
<tr>
<th class="vmname">VMName</th>
<th class="ipaddr">IP Address</th>
<th class="FQDN">FQDN</th>
<th class="Team">Team Name</th>
<th class="Owner">Owner</th>
</tr>
</thead>
<tbody>
<tr id="vmname">
<td class="vmname">SomeName</td>
<td class="ipaddr">PlaceHolder</td>
<td class="FQDN">PlaceHolder</td>
<td class="Team">PlaceHolder</td>
<td class="Owner">PlaceHolder</td>
</tr></tbody></table></div>
使每一行可点击的我的脚本部分似乎不起作用。我相信这是因为代码在 Javascript 完成创建表之前运行。
在创建表后,我正在寻求帮助让此代码工作:
$("#result").ready(function () {
var table = document.getElementById('VMList'),
cells = table.getElementByTagName('td');
for (var i=0,len=cells.length; i<len; i++){
cells[i].onclick = function() {
alert(this.innerText);
}
}
});