{"id":21250,"date":"2024-03-15T21:43:52","date_gmt":"2024-03-15T21:43:52","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-can-you-retrieve-the-selected-data-in-a-table-using-layui\/"},"modified":"2024-03-21T20:02:16","modified_gmt":"2024-03-21T20:02:16","slug":"how-can-you-retrieve-the-selected-data-in-a-table-using-layui","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-can-you-retrieve-the-selected-data-in-a-table-using-layui\/","title":{"rendered":"How can you retrieve the selected data in a table using layui?"},"content":{"rendered":"

In layui, you can retrieve the selected data in a table by listening to the change event of the checkbox selection box. The specific steps are as follows:<\/p>\n

    \n
  1. Add a “lay-filter” attribute to the checkbox in the table to identify the name of the checkbox, for example lay-filter=”check”.<\/li>\n
  2. In JavaScript code, use the form module from layui to listen to the change event of a checkbox.<\/li>\n
  3. In the callback function of the change event, you can use the checkStatus method of the layui table module to retrieve the selected data in the table.<\/li>\n<\/ol>\n

    Here is an example code:<\/p>\n

    HTML code:<\/p>\n

    <table<\/span> class<\/span>=\"layui-table\"<\/span>><\/span>\r\n  <thead<\/span>><\/span>\r\n    <tr<\/span>><\/span>\r\n      <th<\/span>><\/span><input<\/span> type<\/span>=\"checkbox\"<\/span> lay-filter<\/span>=\"check\"<\/span> \/><\/span><\/th<\/span>><\/span>\r\n      <th<\/span>><\/span>\u59d3\u540d<\/th<\/span>><\/span>\r\n      <th<\/span>><\/span>\u5e74\u9f84<\/th<\/span>><\/span>\r\n      <th<\/span>><\/span>\u6027\u522b<\/th<\/span>><\/span>\r\n    <\/tr<\/span>><\/span>\r\n  <\/thead<\/span>><\/span>\r\n  <tbody<\/span>><\/span>\r\n    <tr<\/span>><\/span>\r\n      <td<\/span>><\/span><input<\/span> type<\/span>=\"checkbox\"<\/span> lay-filter<\/span>=\"check\"<\/span> \/><\/span><\/td<\/span>><\/span>\r\n      <td<\/span>><\/span>\u5f20\u4e09<\/td<\/span>><\/span>\r\n      <td<\/span>><\/span>20<\/td<\/span>><\/span>\r\n      <td<\/span>><\/span>\u7537<\/td<\/span>><\/span>\r\n    <\/tr<\/span>><\/span>\r\n    <tr<\/span>><\/span>\r\n      <td<\/span>><\/span><input<\/span> type<\/span>=\"checkbox\"<\/span> lay-filter<\/span>=\"check\"<\/span> \/><\/span><\/td<\/span>><\/span>\r\n      <td<\/span>><\/span>\u674e\u56db<\/td<\/span>><\/span>\r\n      <td<\/span>><\/span>22<\/td<\/span>><\/span>\r\n      <td<\/span>><\/span>\u5973<\/td<\/span>><\/span>\r\n    <\/tr<\/span>><\/span>\r\n  <\/tbody<\/span>><\/span>\r\n<\/table<\/span>><\/span>\r\n<\/code><\/pre>\n
    JavaScript code:<\/p>\n
    layui.use<\/span>(['form'<\/span>, 'table'<\/span>], function<\/span>(<\/span>) {\r\n  var<\/span> form = layui.form<\/span>;\r\n  var<\/span> table = layui.table<\/span>;\r\n\r\n  \/\/ \u76d1\u542ccheckbox\u9009\u62e9\u6846\u7684change\u4e8b\u4ef6<\/span>\r\n  form.on<\/span>('checkbox(check)'<\/span>, function<\/span>(data<\/span>) {\r\n    \/\/ \u83b7\u53d6\u8868\u683c\u9009\u4e2d\u7684\u6570\u636e<\/span>\r\n    var<\/span> checkStatus = table.checkStatus<\/span>('tableId'<\/span>);  \/\/ tableId\u4e3a\u8868\u683c\u7684id<\/span>\r\n    var<\/span> data = checkStatus.data<\/span>;  \/\/ \u83b7\u53d6\u9009\u4e2d\u7684\u6570\u636e<\/span>\r\n    console<\/span>.log<\/span>(data);\r\n  });\r\n});\r\n<\/code><\/pre>\n
    In the code above, the change event callback function is triggered when the status of the checkbox changes. Within the callback function, the table.checkStatus method is used to retrieve the selected data from the table and output it to the console.<\/p>\n","protected":false},"excerpt":{"rendered":"
    In layui, you can retrieve the selected data in a table by listening to the change event of the checkbox selection box. The specific steps are as follows: Add a “lay-filter” attribute to the checkbox in the table to identify the name of the checkbox, for example lay-filter=”check”. In JavaScript code, use the form module […]<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-21250","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\nHow can you retrieve the selected data in a table using layui? - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-can-you-retrieve-the-selected-data-in-a-table-using-layui\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How can you retrieve the selected data in a table using layui?\" \/>\n<meta property=\"og:description\" content=\"In layui, you can retrieve the selected data in a table by listening to the change event of the checkbox selection box. The specific steps are as follows: Add a “lay-filter” attribute to the checkbox in the table to identify the name of the checkbox, for example lay-filter=”check”. In JavaScript code, use the form module […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-can-you-retrieve-the-selected-data-in-a-table-using-layui\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-15T21:43:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-21T20:02:16+00:00\" \/>\n<meta name=\"author\" content=\"Isabella Edwards\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Isabella Edwards\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-you-retrieve-the-selected-data-in-a-table-using-layui\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-you-retrieve-the-selected-data-in-a-table-using-layui\/\"},\"author\":{\"name\":\"Isabella Edwards\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/5579144e23c225c8188167f3e3f888dd\"},\"headline\":\"How can you retrieve the selected data in a table using layui?\",\"datePublished\":\"2024-03-15T21:43:52+00:00\",\"dateModified\":\"2024-03-21T20:02:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-you-retrieve-the-selected-data-in-a-table-using-layui\/\"},\"wordCount\":157,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-you-retrieve-the-selected-data-in-a-table-using-layui\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-can-you-retrieve-the-selected-data-in-a-table-using-layui\/\",\"name\":\"How can you retrieve the selected data in a table using layui? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T21:43:52+00:00\",\"dateModified\":\"2024-03-21T20:02:16+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-you-retrieve-the-selected-data-in-a-table-using-layui\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-can-you-retrieve-the-selected-data-in-a-table-using-layui\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-you-retrieve-the-selected-data-in-a-table-using-layui\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How can you retrieve the selected data in a table using layui?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/5579144e23c225c8188167f3e3f888dd\",\"name\":\"Isabella Edwards\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d4d4dec47f553ac7961d9fa4cc9bdcdcf5b7ce5106594330b6d25c5694fdbaec?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d4d4dec47f553ac7961d9fa4cc9bdcdcf5b7ce5106594330b6d25c5694fdbaec?s=96&d=mm&r=g\",\"caption\":\"Isabella Edwards\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/isabellaedwards\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How can you retrieve the selected data in a table using layui? - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/how-can-you-retrieve-the-selected-data-in-a-table-using-layui\/","og_locale":"en_US","og_type":"article","og_title":"How can you retrieve the selected data in a table using layui?","og_description":"In layui, you can retrieve the selected data in a table by listening to the change event of the checkbox selection box. The specific steps are as follows: Add a “lay-filter” attribute to the checkbox in the table to identify the name of the checkbox, for example lay-filter=”check”. In JavaScript code, use the form module […]","og_url":"https:\/\/www.silicloud.com\/blog\/how-can-you-retrieve-the-selected-data-in-a-table-using-layui\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T21:43:52+00:00","article_modified_time":"2024-03-21T20:02:16+00:00","author":"Isabella Edwards","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Isabella Edwards","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-can-you-retrieve-the-selected-data-in-a-table-using-layui\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-you-retrieve-the-selected-data-in-a-table-using-layui\/"},"author":{"name":"Isabella Edwards","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/5579144e23c225c8188167f3e3f888dd"},"headline":"How can you retrieve the selected data in a table using layui?","datePublished":"2024-03-15T21:43:52+00:00","dateModified":"2024-03-21T20:02:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-you-retrieve-the-selected-data-in-a-table-using-layui\/"},"wordCount":157,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-can-you-retrieve-the-selected-data-in-a-table-using-layui\/","url":"https:\/\/www.silicloud.com\/blog\/how-can-you-retrieve-the-selected-data-in-a-table-using-layui\/","name":"How can you retrieve the selected data in a table using layui? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T21:43:52+00:00","dateModified":"2024-03-21T20:02:16+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-you-retrieve-the-selected-data-in-a-table-using-layui\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-can-you-retrieve-the-selected-data-in-a-table-using-layui\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-can-you-retrieve-the-selected-data-in-a-table-using-layui\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How can you retrieve the selected data in a table using layui?"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/5579144e23c225c8188167f3e3f888dd","name":"Isabella Edwards","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d4d4dec47f553ac7961d9fa4cc9bdcdcf5b7ce5106594330b6d25c5694fdbaec?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d4d4dec47f553ac7961d9fa4cc9bdcdcf5b7ce5106594330b6d25c5694fdbaec?s=96&d=mm&r=g","caption":"Isabella Edwards"},"url":"https:\/\/www.silicloud.com\/blog\/author\/isabellaedwards\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/21250","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=21250"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/21250\/revisions"}],"predecessor-version":[{"id":55100,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/21250\/revisions\/55100"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=21250"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=21250"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=21250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}