如何提取<tr>标签内文本时避免出现undefined值？

我写了提取标签内文本值的代码，能正常获取表头文本（比如示例里的"English"和"Japanese"），但提取后续文本值时浏览器显示"undefined"。需要提取的值以字符串形式发送，而非"undefined"。以下是我的HTML和JS代码：

原HTML代码 #

<!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>

原JS代码 #

// 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);
        }
    });
}

问题分析与修复方案 #

问题根源 #

1. 错误获取input值：td元素本身没有value属性，却试图用td.value获取输入框的值，这是undefined的直接来源。
2. 逻辑冗余错误：第二个分支里错误赋值tdData = td.value，属于无用且错误的代码。
3. 判断方式不可靠：用td.innerHTML.indexOf('input')判断是否包含输入框，不如直接查找input元素准确。

修复后的SaveToDB函数 #

const SaveToDB = () => {
    let data = [];
    let tbl_tr = table.querySelectorAll('tr');
    tbl_tr.forEach(function(tr){
        let cells = tr.querySelectorAll('td');
        if (cells.length !== 0){
            let d = [];
            cells.forEach(function(td){
                // 获取单元格内的input元素
                const input = td.querySelector('input');
                if (input) {
                    // 跳过删除按钮，只处理文本输入框
                    if (input.type !== 'button') {
                        // 输入框为空时用空字符串代替undefined
                        d.push(input.value || "");
                    }
                } 
                // 处理纯文本单元格
                else if (td.textContent.trim() !== "") {
                    d.push(td.innerText);
                } 
                // 空白单元格用指定字符串填充
                else {
                    d.push("何もないよ");
                }
            });
            data.push(d);
            console.log(data);
        }
    });
}

关键改进 #

• 正确获取输入框值：通过td.querySelector('input')定位输入框，再取input.value。
• 过滤按钮元素：删除按钮无需存入数据，添加判断跳过。
• 空值兜底处理：用input.value || ""确保空输入框返回空字符串，避免undefined。
• 精准文本判断：用trim()去除空格，避免误判空白单元格为有内容。

内容的提问来源于stack exchange，提问作者th168