获取dataTable 行号以及该行所对应的值

最新推荐文章于 2025-05-04 17:12:28 发布

i秋风伴落叶

最新推荐文章于 2025-05-04 17:12:28 发布

阅读量1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： dataTable

本文链接：https://blog.youkuaiyun.com/zxf1242652895/article/details/78606940

dataTable 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的表格数据点击事件处理方法。当用户点击表格中的某一行时，会弹出一个模态框显示该行的详细数据。此功能通过jQuery库实现，并利用了DataTable插件提供的API。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<table class="table table-striped table-bordered dataTable no-footer tableStyles"
id="datatable" style="width: 100%;min-width:320px">
    <thead>
        <tr class="headings">
            <th class="column-title">
                采样时间
            </th>
            <th class="column-title">
                平均值
            </th>
            <th class="column-title">
                极差
            </th>
        </tr>
    </thead>
    <tbody id="qualityTable">
    </tbody>
</table>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog"
aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">
                        ×
                    </span>
                </button>
                <h4 class="modal-title" id="myModalLabel2">
                    该行详情
                </h4>
            </div>
            <div class="table-responsive">
                <div class="modal-body" id="getCenterValueID">
                </div>
            </div>
        </div>
    </div>
</div>

$('#datatable tbody').on('click', 'tr',function() {
	    $("#myModalLabel2").text("第"+ this.rowIndex +"行数据详情");
 	    var data = dataTables.row(this).data();
	    if (data == null) {
	        $("#spcContentTip").show();
	    } else {
	        var datas = data.slice(3, data.length); //获取从第三个元素开始到最后
	        var code = "";
	        for (var i in datas) {
	            code = code + '<p>' + "数据_" + i + "： " + datas[i] + '</p>'
	        }
	        $("#getCenterValueID").empty().append(code);
	    }
	});