I wrote down codes which would get text values from <tr> tags.
At present, it seems that I got header texts ("English" and "Japanese" in my case), but I could not manage to following text values after them, which show "undefined" in the browser.
So, could you have any idea to avoid this "undefined" values when you extract them from any tags other than my cases?
Here are my codes (one for HTML, the other for JS).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Your Words!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Add Your New Words!</h1>
<div class="transtable">
<table class="table" id="ENJP" border="1">
<tr>
<th scope="col">English</th>
<th scope="col">Japanese</th>
</tr>
<tr>
<td ><input type="text" name="English"/>
</td>
<td><input type="text" name="Japanese"/>
</td>
<td><input class="closeBtn" type="button" value="X" onclick="DelRow(event)"/>
</td>
</tr>
</table>
</div>
<div class="opt_1">
<input type="button" value="Add a Row" onclick="AddRow()"/>
<input type="button" value="Save Them" onclick="SaveToDB()"/>
</div>
<script src="script.js"></script>
</body>
</html>
// HTMLに対してのJS（サーバーにリクエスト投げます・DBからデータ引っ張ります。）
let table = document.getElementById("ENJP");
const AddRow = () => {
//テーブルに新行追加
let newRow = table.insertRow(-1);
//追加行の内容を決定（セルを１つずつ作る）
let cel_EN = newRow.insertCell(-1);
let cel_JP = newRow.insertCell(-1);
let cel_DeleteButton = newRow.insertCell(-1);
let rowContentEN = '<input type="text" name="English"/>';
let rowContentJP = '<input type="text" name="Japanese"/>';
let rowDeleteButton = '<input class="closeBtn" type="button" value="X" onclick="DelRow(event)"/>';
cel_EN.innerHTML = rowContentEN;
cel_JP.innerHTML = rowContentJP;
cel_DeleteButton.innerHTML = rowDeleteButton;
}
// 行削除の関数
const DelRow = (event) =>{
event.target.closest('tr').remove();
}
//@@Here is where problems happen//
const SaveToDB = () => {
// 抽出したデータを格納する配列変数
let data = [];
let tbl_tr = table.querySelectorAll('tr');
let tdData = ""
//テーブルの1行(trタグ)毎に処理
tbl_tr.forEach(function(tr){
console.log(tr.innerText)
//tdタグを取得・テーブルのヘッダー部分は飛ばす
let cells = tr.querySelectorAll('td');
if (cells.length!=0){
// テーブルの1行(trタグ)のデータを格納する配列
let d =[];
//セル(tdタグ)毎に処理
cells.forEach(function(td){
//セルがinputタグだった場合
if(td.innerHTML.indexOf('input') != -1) {
tdData = td.value
d.push(tdData);
}
//セルがtextだった場合
else if(td.textContent!=""){
tdData = td.value
d.push(td.innerText);
}
//セルが空白だった場合
else{
d.push("何もないよ");
}
});
data.push(d);
console.log(data);
}
});
}
Values are sent as String, not as "undefined".
2
Answers
You should change your code to use td.querySelector(‘input’).value to get the text values inside the tags. Since td does not have a value property, it returns undefined.