请求实现：点击Save按钮弹窗展示Label与TextBox值

没问题，我来帮你搞定这个需求！下面是具体的实现方案，用原生JavaScript就能完成，不需要依赖任何外部库：

核心思路 #

1. 给Save按钮绑定点击事件，拦截它默认的提交行为
2. 遍历表格中的数据行（跳过表头）
3. 提取每行对应的Label文本和TextBox输入值
4. 按照指定格式拼接内容，最后用alert弹窗展示结果

完整代码实现 #

// 确保页面所有元素加载完成后再执行代码
document.addEventListener('DOMContentLoaded', function() {
  // 获取Save按钮元素
  const saveButton = document.getElementById('MainContent_btnButton');
  
  // 绑定点击事件处理逻辑
  saveButton.addEventListener('click', function(event) {
    // 阻止按钮默认的表单提交行为
    event.preventDefault();
    
    // 获取目标表格
    const table = document.getElementById('MainContent_gvKarakteristike');
    // 筛选出所有数据行（排除表头的第一行）
    const dataRows = table.querySelectorAll('tbody tr:not(:first-child)');
    
    let alertContent = '';
    
    // 遍历每一行数据
    dataRows.forEach((row, index) => {
      // 获取当前行的Label值（通过class选择器定位，比动态id更稳定）
      const labelValue = row.querySelector('.IDKarakteristike').textContent.trim();
      // 获取当前行的TextBox值（通过id包含"txtBoxOpis"的属性选择器适配动态id）
      const textBoxValue = row.querySelector('input[id*="txtBoxOpis"]').value.trim();
      
      // 按照要求的格式拼接内容
      alertContent += `${index + 1}. Label${index}(${labelValue}) txtBoxOpis${index}(${textBoxValue})\n`;
    });
    
    // 弹窗展示最终结果
    alert(alertContent);
  });
});

代码细节说明 #

• DOMContentLoaded事件：避免页面元素还没加载完成就执行代码，导致找不到按钮或表格的问题
• 阻止默认行为：原按钮是type="submit"，用event.preventDefault()可以只执行我们的弹窗逻辑，不会触发表单提交
• 选择器优化：
  • tbody tr:not(:first-child)：精准跳过表头行，只处理数据行
  • .IDKarakteristike：利用Label的class属性定位，比动态生成的id更可靠
  • input[id*="txtBoxOpis"]：用属性包含选择器适配动态生成的TextBox id，不管后面的序号怎么变都能定位到

使用方法 #

把这段代码放到页面的<script>标签里，或者引入到外部JS文件中即可。点击Save按钮时，就会弹出包含所有Label和TextBox对应值的弹窗啦！

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