嗨，我看了你的代码，问题主要出在displayDate函数的逻辑以及动态元素的关联上，咱们一步步来修正它：

首先，原displayDate函数里的元素定位逻辑不对，而且动态生成表格时的循环结构有点混乱，导致复选框和对应文本框没法正确关联。下面是修改后的完整代码，我会标注关键调整点：

修改后的JavaScript代码 #

function displayDate(checkbox) {
  // 从复选框name里提取对应的行号（比如address1提取出1）
  let rowNum = checkbox.name.replace('address', '');
  // 找到同一行的日期输入框
  let dateInput = document.getElementById(`date${rowNum}`);
  // 根据复选框勾选状态切换文本框可见性
  dateInput.style.display = checkbox.checked ? "" : "none";
}

function showTable(val) {
  var tempNo = parseInt(val); // 把输入值转为数字，避免字符串判断问题

  // 先清空之前生成的表格，防止重复添加
  var root = document.getElementById("thisDiv");
  root.innerHTML = '';

  if (tempNo > 0) {
    var table = document.createElement('table');
    table.className = "toggleTable";
    var tblB = document.createElement('tbody');
    table.appendChild(tblB);

    headerList = ["School", "Address", "Date"];

    // 生成表头行
    var tr = document.createElement('tr');
    for (var j = 0; j < headerList.length; j++) {
      var th = document.createElement('th');
      th.appendChild(document.createTextNode(headerList[j]));
      tr.appendChild(th);
    }
    tblB.appendChild(tr);

    // 生成数据行
    for (var i = 0; i < tempNo; i++) {
      var curcolumn = i + 1;
      var tr = document.createElement('tr');
      tblB.appendChild(tr);

      // 第一列：学校输入框
      var tdSchool = document.createElement('td');
      var inputSchool = document.createElement("input");
      inputSchool.type = "text";
      inputSchool.name = `school${curcolumn}`;
      inputSchool.value = curcolumn;
      inputSchool.id = `school${curcolumn}`;
      tdSchool.appendChild(inputSchool);
      tr.appendChild(tdSchool);

      // 第二列：地址复选框
      var tdAddress = document.createElement('td');
      var inputCheckbox = document.createElement("input");
      inputCheckbox.type = "checkbox";
      inputCheckbox.name = `address${curcolumn}`;
      inputCheckbox.id = `address${curcolumn}`;
      inputCheckbox.className = "dynamic"; // 注意DOM元素用className而非class
      // 绑定点击事件，直接传当前复选框元素
      inputCheckbox.addEventListener('click', function() {
        displayDate(this);
      }, false);
      tdAddress.appendChild(inputCheckbox);
      tr.appendChild(tdAddress);

      // 第三列：日期输入框（默认隐藏）
      var tdDate = document.createElement('td');
      var inputDate = document.createElement("input");
      inputDate.type = "text";
      inputDate.name = `date${curcolumn}`;
      inputDate.value = "";
      inputDate.id = `date${curcolumn}`;
      inputDate.style.display = "none";
      tdDate.appendChild(inputDate);
      tr.appendChild(tdDate);
    }
    root.appendChild(table);
  }
}


function onSavePressed() {
  schoolCnt = parseInt(document.getElementById('schoolCnt').value);
  var schoolList = {};
  for (var i = 1; i <= schoolCnt; i++) {
    schoolList[`school${i}`] = document.getElementById(`school${i}`).value;
    schoolList[`address${i}`] = document.getElementById(`address${i}`).checked; // 复选框取checked状态而非value
    schoolList[`date${i}`] = document.getElementById(`date${i}`).value;
  }
  console.log(schoolList);
  // 这里可继续添加保存到数据库的逻辑
}

修改后的CSS代码（仅修正一处小细节） #

body {
  margin-left: 240px;
  margin-top: 50px;
}

table {
  border-collapse: collapse;
}

td,
th {
  border: 0px solid black;
  padding: 10px;
  height: 2px;
}

#label {
  font-size: 14px;
  text-align: right;
}

table.schoolTable {
  margin: 10px 30px;
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  width: 600px;
  border: 0px solid black;
}

.schoolTable input[type=text] {
  font-size: 12px;
  border: 1px solid #73AD21;
  cursor: pointer;
  font-family: verdana, arial, sans-serif;
  font-size: 18px;
  text-align: center;
  width: 210px;
  height: 30px;
}

.schoolTable input[type=checkbox] {
  font-size: 25px;
  border: 1px solid #73AD21;
  cursor: pointer;
  font-family: verdana, arial, sans-serif;
  text-align: left;
  height: 25px;
  width: 80px;
}

.toggleTable {
  width: 950px;
  border-width: 1px;
  padding: 1px;
  border-style: solid;
  border-color: #517994;
  background-color: lightblue;
  margin-left: 20px;
}


.toggleTable input[type=text] {
  cursor: pointer;
  font-family: verdana, arial, sans-serif;
  font-size: 14px;
  text-align: center;
  height: 25px;
  width: 100%;
}

.toggleTable input[type=checkbox] {
  cursor: pointer;
  font-family: verdana, arial, sans-serif;
  font-size: 14px;
  text-align: left;
  height: 25px;
  width: 80%;
}

.toggleTable td {
  font-size: 14px;
  border: 0px solid #73AD21;

}

.toggleTable th {
  width: 5%;
  font-size: 13px;

}

.hide {
  display: none;
}

HTML代码（仅修正onChange的格式问题） #

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<form name="myform" id="my_form">

  <table class="schoolTable">
    <h1 style="font-weight:bold;color:blue;font-size:18px;text-align:left;"> School </h1>

    <tr>
      <th id="label">School Count :</th>
      <td><input type="text" id="schoolCnt" onChange="showTable(this.value)"></td>
    </tr>

  </table>
  <br>

  <div id="thisDiv" style="visibility:visible;"></div>

  <br> <br>
  <table style="margin-left:40px">
    <tr>
      <td>
        <input type="submit" value="SaveToDB" onclick="onSavePressed()" style="font-weight:bold;color:green;font-size:18px;">
      </td>
    </tr>
  </table>

</form>

关键调整说明： #

• displayDate函数优化：直接接收点击的复选框元素，通过name提取行号，精准定位对应日期文本框，根据勾选状态切换可见性。
• 动态表格结构梳理：把原嵌套循环拆分为清晰的三列生成逻辑，避免列顺序混乱，确保每一行的复选框和文本框一一对应。
• 重复表格问题解决：生成新表格前先清空容器内容，防止多次输入数字时重复添加表格。
• 复选框值修正：保存时取复选框的checked属性而非value，才能正确获取勾选状态。

这样修改后，勾选任意行的复选框，对应的日期文本框就会显示；取消勾选则隐藏，完全符合你的需求啦～

备注：内容来源于stack exchange，提问作者user3280899