如何将多组Cookie值展示到表格行并仅显示值本身

先梳理你代码里的核心问题，一步步修正就能实现只显示Cookie值的需求：

1. 统一Cookie名称 #

你的checkCookie函数里，调用setCookie时用的是"u"和"p"作为Cookie名，但getCookie查找的是"username"和"password"，这会导致后续无法正确获取Cookie值。先修正这部分：

function checkCookie() {
    let user = getCookie("username");
    let password = getCookie("password");
    if (user != "" && password != "") {
      alert("Welcome again " + user);
    } else {
       user = prompt("Please enter your name:","");
       password = prompt("Please enter your password:","");
       document.getElementsByName("chktext[1]")[0]?.value = user;
       document.getElementsByName("chktext2[1]")[0]?.value = password;
       if ( user != null  && password != null ) {
         // 把Cookie名改成和getCookie查找的一致
         setCookie("username", user, 30);
         setCookie("password", password, 30);
       }
    }
    // 每次检查后更新表格
    updateCookieTable();
  }

2. 重写表格更新逻辑（弃用原getCookie2） #

你已经有了getCookie这个可靠的工具函数，没必要自己重新解析document.cookie。直接用它提取值，再更新表格：

// 改名成更清晰的函数名，直接负责更新表格内容
function updateCookieTable() {
    const username = getCookie("username");
    const password = getCookie("password");
    const row = document.getElementById("myRow");
    // 只插入Cookie的值，去掉键名部分
    row.innerHTML = `<td>${username || ""}</td><td>${password || ""}</td>`;
}

3. 页面加载时初始化显示 #

在页面加载完成后调用一次更新逻辑，确保打开页面就显示已有的Cookie值：

window.addEventListener('load', function() {
    checkCookie();
    updateCookieTable();
});

为什么你之前的修改没生效？ #

你尝试的var cookies = document.cookie.split('=')[0];只是把整个Cookie字符串按第一个等号拆分，拿到的是第一个Cookie的键名，既没处理多个Cookie分号分隔的情况，也没提取对应的值。而用现成的getCookie函数，它已经处理了空格去除、解码等细节，逻辑更可靠。

修改后的完整代码 #

JavaScript部分

function setCookie(cname,cvalue,exdays) {
    const d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    let expires = "expires=" + d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
    let name =  cname + "=";
    let decodedCookie = decodeURIComponent(document.cookie);
    let ca = decodedCookie.split(';');
    for(let i = 0; i < ca.length; i++) {
       let c = ca[i];
       while (c.charAt(0)==' ') c = c.substring(1);
       if (c.indexOf(name) != -1) 
           return c.substring(name.length,c.length);
    }
    return "";
}

function checkCookie() {
    let user = getCookie("username");
    let password = getCookie("password");
    if (user != "" && password != "") {
      alert("Welcome again " + user);
    } else {
       user = prompt("Please enter your name:","");
       password = prompt("Please enter your password:","");
       document.getElementsByName("chktext[1]")[0]?.value = user;
       document.getElementsByName("chktext2[1]")[0]?.value = password;
       if ( user != null  && password != null ) {
         setCookie("username", user, 30);
         setCookie("password", password, 30);
       }
    }
}

function updateCookieTable() {
    const username = getCookie("username");
    const password = getCookie("password");
    const row = document.getElementById("myRow");
    row.innerHTML = `<td>${username || ""}</td><td>${password || ""}</td>`;
}

window.addEventListener('load', function() {
    checkCookie();
    updateCookieTable();
});

HTML表格部分（保持不变）

<table>
    <thead>
      <tr>
        <td>USER</td>
        <td>PASSWORD</td>
      </tr>
    </thead>
    <tbody>
      <tr id="myRow">
        <td></td>
        <td></td>
      </tr>
    </tbody>
</table>

修改后，输入用户名A和密码B时，表格就只会显示A和B了。

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