PHP实现：同一页面中如何将上一行textbox值传递至新增行

当然可以实现这个需求！这是动态表单里非常实用的用户体验优化，能帮用户省去重复输入的麻烦。我给你拆解不同技术栈的实现思路，核心逻辑都是相通的：

原生JavaScript方案 #

假设你的表单行基础结构是这样的：

<div class="form-row-container">
  <!-- 初始行 -->
  <div class="form-row">
    <input type="text" class="teacher-name" value="AAAA">
    <input type="text" class="subject" placeholder="教授科目">
    <input type="text" class="class-room" placeholder="教授班级">
  </div>
</div>
<button id="add-row-btn">+</button>

接下来写核心逻辑：点击「+」按钮时，复制最后一行的教师名称到新行，同时清空科目和班级输入框（还可以把新行的教师名称设置为只读，避免误改）：

document.getElementById('add-row-btn').addEventListener('click', function() {
  const rowContainer = document.querySelector('.form-row-container');
  const lastRow = rowContainer.querySelector('.form-row:last-child');
  
  // 克隆最后一行的DOM结构
  const newRow = lastRow.cloneNode(true);
  
  // 获取最后一行的教师名称值
  const targetTeacherName = lastRow.querySelector('.teacher-name').value;
  
  // 设置新行的教师名称，并且设为只读（可选，根据需求调整）
  const newRowTeacherInput = newRow.querySelector('.teacher-name');
  newRowTeacherInput.value = targetTeacherName;
  newRowTeacherInput.readOnly = true;
  
  // 清空新行的科目和班级输入框
  newRow.querySelector('.subject').value = '';
  newRow.querySelector('.class-room').value = '';
  
  // 把新行添加到容器中
  rowContainer.appendChild(newRow);
});

Vue框架方案（数据驱动更简洁） #

如果用Vue开发，逻辑会更直观，完全通过数据来控制：

<template>
  <div>
    <div v-for="(row, index) in teacherRows" :key="index" class="form-row">
      <!-- 只有第一行允许修改教师名称，后续行只读 -->
      <input v-model="row.teacherName" :readonly="index > 0">
      <input v-model="row.subject" placeholder="教授科目">
      <input v-model="row.classRoom" placeholder="教授班级">
    </div>
    <button @click="addNewRow">+</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      teacherRows: [
        { teacherName: 'AAAA', subject: '', classRoom: '' }
      ]
    }
  },
  methods: {
    addNewRow() {
      const lastRow = this.teacherRows[this.teacherRows.length - 1];
      this.teacherRows.push({
        teacherName: lastRow.teacherName,
        subject: '',
        classRoom: ''
      });
    }
  }
}
</script>

额外优化建议 #

• 只读权限控制：除了初始行，所有新增行的教师名称输入框设置为只读，彻底避免重复输入；
• 同步初始行修改：如果用户修改了第一行的教师名称，可以自动同步所有已新增行的对应值，逻辑更严谨；
• 添加删除按钮：给每一行配上删除按钮，方便用户移除不需要的条目。

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