求助：使用jQuery点击按钮读取动态表格中标签、文本框及下拉框的值

嘿，我来帮你搞定这个动态表格的问题！根据你提供的ASP.NET GridView生成的表格结构，我们可以用jQuery轻松实现点击按钮后提取每一行的标签文本和对应控件值的需求。

先理清楚你的需求核心 #

• 表格行数不固定，由数据库返回的数据决定
• 每一行的第三列要么显示文本框（.txtbox），要么显示下拉框（.ddl），另一个会被隐藏（display:none）
• 点击按钮后，要把第一列的标签文本和第三列的控件值对应展示出来

解决方案步骤 #

1. 添加触发按钮和结果展示容器

先在页面里加一个按钮和用来放结果的容器：

<button id="btnExtractData">提取表格数据</button>
<div id="resultContainer" style="margin-top:20px; padding:10px; border:1px solid #eee;"></div>

2. 核心jQuery代码

这段代码会遍历表格的每一行，提取需要的数据并展示：

$(document).ready(function() {
    $('#btnExtractData').click(function() {
        // 清空之前的结果
        $('#resultContainer').empty();
        
        // 创建一个美观的结果表格
        const resultTable = $('<table>').css({
            'border-collapse': 'collapse',
            'width': '90%',
            'margin': '10px 0'
        });
        
        // 添结果表格的表头
        resultTable.append($('<tr>').append(
            $('<th>').text('标签名称').css({'border': '1px solid #ccc', 'padding': '8px', 'background': '#507CD1', 'color': '#fff'}),
            $('<th>').text('对应值').css({'border': '1px solid #ccc', 'padding': '8px', 'background': '#507CD1', 'color': '#fff'})
        ));
        
        // 遍历表格的每一行（跳过表头行）
        $('#MainContent_gvKarakteristike tbody tr:not(:first)').each(function() {
            const $row = $(this);
            // 获取第一列的标签文本
            const labelText = $row.find('td:first span').text().trim();
            // 找到第三列里**可见**的控件（因为另一个是隐藏的）
            const $visibleControl = $row.find('td:eq(2) .txtbox:visible, td:eq(2) .ddl:visible');
            let controlValue = '';
            
            // 根据控件类型获取对应的值
            if ($visibleControl.hasClass('txtbox')) {
                // 文本框直接取输入值
                controlValue = $visibleControl.val().trim();
            } else if ($visibleControl.hasClass('ddl')) {
                // 下拉框可以选选中的文本或者值，这里用文本，要值的话换成$visibleControl.val().trim()
                controlValue = $visibleControl.find('option:selected').text().trim();
            }
            
            // 把数据添加到结果表格里
            resultTable.append($('<tr>').append(
                $('<td>').text(labelText).css({'border': '1px solid #ccc', 'padding': '8px'}),
                $('<td>').text(controlValue).css({'border': '1px solid #ccc', 'padding': '8px'})
            ));
        });
        
        // 把结果表格放到容器里
        $('#resultContainer').append(resultTable);
    });
});

代码关键点说明 #

• 用tbody tr:not(:first)精准跳过表头行，只处理数据行
• 通过:visible选择器自动识别第三列里实际显示的控件，不用关心数据库返回的是文本框还是下拉框
• 针对不同控件类型分别取值，确保数据准确
• 动态生成结果表格，保持和原表格一致的展示风格，可读性更强

扩展：如果需要提交数据到后端 #

如果要把提取到的数据传给后端接口，可以把数据整理成JSON格式，用AJAX发送：

$('#btnExtractData').click(function() {
    const dataArray = [];
    
    $('#MainContent_gvKarakteristike tbody tr:not(:first)').each(function() {
        const $row = $(this);
        const labelText = $row.find('td:first span').text().trim();
        const $visibleControl = $row.find('td:eq(2) .txtbox:visible, td:eq(2) .ddl:visible');
        let controlValue = '';
        
        if ($visibleControl.hasClass('txtbox')) {
            controlValue = $visibleControl.val().trim();
        } else if ($visibleControl.hasClass('ddl')) {
            controlValue = $visibleControl.val().trim(); // 这里取下拉框的value值
        }
        
        // 还可以顺便提取第二列的ID值
        const itemId = $row.find('.IDKarakteristike').text().trim();
        
        dataArray.push({
            id: itemId,
            label: labelText,
            value: controlValue
        });
    });
    
    // 发送到后端接口
    $.ajax({
        url: '/your-api-endpoint',
        method: 'POST',
        data: JSON.stringify(dataArray),
        contentType: 'application/json',
        success: function(res) {
            alert('数据提交成功！');
        },
        error: function(xhr) {
            alert('提交失败：' + xhr.responseText);
        }
    });
});

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