iT邦幫忙

1

log裡的HTMLCollection可以看到長度,但用length卻永遠都是1

html

<form id="newform"  align="center" valign="center">
  <label>業務 <input name="name" type="text"></label>
  <label>客戶 <input name="client" type="text"></label>
  <label>檔案 <input name="myfile" type="file"></label>
  <input id="submit" type="submit" value="送出">
</form>
		
<table class="table" id="table" align="center" valign="center">
    <thead>
      <tr>
		<th>id</th>
        <th>代號</th>
        <th>簡稱</th>
        <th></th>
        <th></th>
        <th></th>
      </tr>
    </thead>
    <tbody id="tablebody" >

    </tbody>
  </table>

JS

document.addEventListener('DOMContentLoaded', function fetch() {
	$.ajax({
		type: "GET",
		url: "PM_json.php",
		dataType : 'json',
		success:function(data){
			for (var i = 0; i < data.length; i++) {
				var id				= data[i].id;
				var name			= data[i].name;
				var client			= data[i].client;
				var file			= data[i].file;
                
				var row = `<tr><td>`+ id 		+`</td>
							   <td>`+ name		+`</td>
							   <td>`+ client	+`</td>
							   <td><input type="button" name="pm_file" class="btn btn-info" value="檔案" onclick="window.open('`+ file +`')"></td>
							   <td><input type="button" name="pm_update" class="btn btn-success" value="修改"></td>
							   <td><input type="button" name="pm_del" class="btn btn-danger" value="刪除"></td>
						  </tr>`
			tablebody.innerHTML += row				
			//console.log(data[i])

			}
			//console.log(data)
			//console.log(data.state);
		}
	});
},false);

function del() {
var table = document.getElementById('table'); 
var cells = table.getElementsByTagName('tr');
console.log(cells);
console.log(cells.length);
console.log(cells[0]);
}

問題1
console.log(cells)出來的內容如上圖,明明就是有length阿....
但我怎麼console.log(cells.length)都是1
我已經把程式碼放在網頁最下方且在</body>之前了
請問為什麼會這樣?

問題2
請問如果不用jquery的話怎麼取出每行row裡面的id?

淺水員 iT邦研究生 1 級 ‧ 2020-07-23 00:51:09 檢舉
這邊沒看到你是什麼時候呼叫 del 函式的
amisser iT邦新手 5 級 ‧ 2020-07-23 08:33:32 檢舉
诶...那只是我先包起來的...因為這樣po上來比較好看....
實際是沒有那個function del()
只有
var table = document.getElementById('table');
var cells = table.getElementsByTagName('tr');
console.log(cells);
console.log(cells.length);
console.log(cells[0]);
淺水員 iT邦研究生 1 級 ‧ 2020-07-23 11:57:13 檢舉
寫在 function 裡面而沒呼叫的話並不會執行喔。既然原本沒包在 function 裡面,那麼會在抓到資料前就執行了。(如 dragonH 所說)

1 個回答

3
dragonH
iT邦超人 5 級 ‧ 2020-07-23 01:47:40
最佳解答

問題1
console.log(cells)出來的內容如上圖,明明就是有length阿....
但我怎麼console.log(cells.length)都是1
我已經把程式碼放在網頁最下方且在之前了
請問為什麼會這樣?

看到你的那些 cell

是透過 ajax 後才 render 出來的

有可能是遇到非同步的問題

問題2
請問如果不用jquery的話怎麼取出每行row裡面的id?

這樣

你可以直接參考 render 完的結果

image

看更多先前的回應...收起先前的回應...
amisser iT邦新手 5 級 ‧ 2020-07-23 08:44:13 檢舉

第1個問題解決了,我是用window.onload = function() {}把那幾行包起來就可以了
但我之前用document.addEventListener('DOMContentLoaded', function del(){}卻不行,請問為什麼?
我以為兩個都是等dom載入以後再執行?

dragonH iT邦超人 5 級 ‧ 2020-07-23 09:47:38 檢舉

amisser

但是你的 ajax 不會馬上回應呀

所以他說的 1

應該是抓到你 thead 的那個 tr

然後

console 看 variable

必須要用 json.stringify()

才能保持一致

淺水員 iT邦研究生 1 級 ‧ 2020-07-23 11:56:01 檢舉

他問題二問的會不會是 ajax 的方式阿?

dragonH iT邦超人 5 級 ‧ 2020-07-23 11:58:05 檢舉

我覺得他應該是在 ajax 還沒完成

就直接印 tr

這時的 tr

只有 thead 那個

我要發表回答

立即登入回答