0

私の検索は無駄であることが判明しました。誰かが私に助けをくれることを願っています. 私はJavaScriptにもかなり慣れていません。

iFRAME を間に挟んだ複数の DIV タグで構成されるサイトを構築しました。iframe の HTML ページ内にテーブルをロードする Javascript をセットアップしました。各行の最初のセルは名前で構成されます。

各行をクリックして、最初のセルの名前を返してもらいたいです。今のところ、アラート機能を使用して、コードが機能しているかどうかを判断しています。

これが私の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);
    }
}
});
4

1 に答える 1

0

代わりに$（document）.readyを使用するのはどうですか？また、オンクリックを使用してAjax呼び出し（またはトリガー）を実行します。

于 2012-11-08T19:50:08.547 に答える