{"id":17793,"date":"2024-03-15T15:43:15","date_gmt":"2024-03-15T15:43:15","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-the-data-of-the-current-row-in-layui\/"},"modified":"2024-03-21T11:45:29","modified_gmt":"2024-03-21T11:45:29","slug":"how-can-i-retrieve-the-data-of-the-current-row-in-layui","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-the-data-of-the-current-row-in-layui\/","title":{"rendered":"How can I retrieve the data of the current row in layui?"},"content":{"rendered":"<p>In layui, you can use table event listeners to retrieve data from the current row. Here are the specific steps:<\/p>\n<p>To begin with, in the definition of the table, attach an event listener to the operation button of each row, for example:<\/p>\n<pre class=\"post-pre\"><code>table.<span class=\"hljs-title function_\">on<\/span>(<span class=\"hljs-string\">'tool(test)'<\/span>, <span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">obj<\/span>){\r\n  <span class=\"hljs-keyword\">var<\/span> data = obj.<span class=\"hljs-property\">data<\/span>; <span class=\"hljs-comment\">\/\/ \u83b7\u53d6\u5f53\u524d\u884c\u7684\u6570\u636e<\/span>\r\n  <span class=\"hljs-keyword\">var<\/span> layEvent = obj.<span class=\"hljs-property\">event<\/span>; <span class=\"hljs-comment\">\/\/ \u83b7\u53d6\u5f53\u524d\u70b9\u51fb\u7684\u6309\u94ae\u7684lay-event\u5c5e\u6027\u503c<\/span>\r\n  <span class=\"hljs-comment\">\/\/ \u6839\u636elayEvent\u7684\u503c\u8fdb\u884c\u76f8\u5e94\u7684\u64cd\u4f5c<\/span>\r\n});\r\n<\/code><\/pre>\n<p>Next, in the definition of the button, add a lay-event attribute to identify the type of operation when the button is clicked, for example:<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"layui-btn layui-btn-sm\"<\/span> <span class=\"hljs-attr\">lay-event<\/span>=<span class=\"hljs-string\">\"edit\"<\/span>&gt;<\/span>\u7f16\u8f91<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<p>In event listening, you can access the data of the current row using obj.data and then perform the necessary actions accordingly. For example, you can use data.id to retrieve the id of the current row and then update or delete the data based on the id.<\/p>\n<p>Note: the &#8216;test&#8217; in the above code is the value of the table&#8217;s lay-filter attribute, which needs to be modified according to the actual situation. Additionally, you can also use layui&#8217;s custom events to retrieve the current row data, the method is similar, just replace &#8216;tool&#8217; with &#8216;event&#8217;.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In layui, you can use table event listeners to retrieve data from the current row. Here are the specific steps: To begin with, in the definition of the table, attach an event listener to the operation button of each row, for example: table.on(&#8216;tool(test)&#8217;, function(obj){ var data = obj.data; \/\/ \u83b7\u53d6\u5f53\u524d\u884c\u7684\u6570\u636e var layEvent = obj.event; \/\/ [&hellip;]<\/p>\n","protected":false},"author":12,"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-17793","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How can I retrieve the data of the current row in 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-i-retrieve-the-data-of-the-current-row-in-layui\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How can I retrieve the data of the current row in layui?\" \/>\n<meta property=\"og:description\" content=\"In layui, you can use table event listeners to retrieve data from the current row. Here are the specific steps: To begin with, in the definition of the table, attach an event listener to the operation button of each row, for example: table.on(&#039;tool(test)&#039;, function(obj){ var data = obj.data; \/\/ \u83b7\u53d6\u5f53\u524d\u884c\u7684\u6570\u636e var layEvent = obj.event; \/\/ [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-the-data-of-the-current-row-in-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-15T15:43:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-21T11:45:29+00:00\" \/>\n<meta name=\"author\" content=\"Liam\" \/>\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=\"Liam\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\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-i-retrieve-the-data-of-the-current-row-in-layui\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-the-data-of-the-current-row-in-layui\/\"},\"author\":{\"name\":\"Liam\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/23786905eb7b377f45ddb01c17da7671\"},\"headline\":\"How can I retrieve the data of the current row in layui?\",\"datePublished\":\"2024-03-15T15:43:15+00:00\",\"dateModified\":\"2024-03-21T11:45:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-the-data-of-the-current-row-in-layui\/\"},\"wordCount\":176,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-the-data-of-the-current-row-in-layui\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-the-data-of-the-current-row-in-layui\/\",\"name\":\"How can I retrieve the data of the current row in layui? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T15:43:15+00:00\",\"dateModified\":\"2024-03-21T11:45:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-the-data-of-the-current-row-in-layui\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-the-data-of-the-current-row-in-layui\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-the-data-of-the-current-row-in-layui\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How can I retrieve the data of the current row in 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\/23786905eb7b377f45ddb01c17da7671\",\"name\":\"Liam\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8d37ed3e7f770dde8bf069ba0b4298688028c3abaacf1131742fc1352d174ebd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8d37ed3e7f770dde8bf069ba0b4298688028c3abaacf1131742fc1352d174ebd?s=96&d=mm&r=g\",\"caption\":\"Liam\"},\"sameAs\":[\"http:\/\/Wilson\"],\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/liamwilson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How can I retrieve the data of the current row in 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-i-retrieve-the-data-of-the-current-row-in-layui\/","og_locale":"en_US","og_type":"article","og_title":"How can I retrieve the data of the current row in layui?","og_description":"In layui, you can use table event listeners to retrieve data from the current row. Here are the specific steps: To begin with, in the definition of the table, attach an event listener to the operation button of each row, for example: table.on('tool(test)', function(obj){ var data = obj.data; \/\/ \u83b7\u53d6\u5f53\u524d\u884c\u7684\u6570\u636e var layEvent = obj.event; \/\/ [&hellip;]","og_url":"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-the-data-of-the-current-row-in-layui\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T15:43:15+00:00","article_modified_time":"2024-03-21T11:45:29+00:00","author":"Liam","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Liam","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-the-data-of-the-current-row-in-layui\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-the-data-of-the-current-row-in-layui\/"},"author":{"name":"Liam","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/23786905eb7b377f45ddb01c17da7671"},"headline":"How can I retrieve the data of the current row in layui?","datePublished":"2024-03-15T15:43:15+00:00","dateModified":"2024-03-21T11:45:29+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-the-data-of-the-current-row-in-layui\/"},"wordCount":176,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-the-data-of-the-current-row-in-layui\/","url":"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-the-data-of-the-current-row-in-layui\/","name":"How can I retrieve the data of the current row in layui? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T15:43:15+00:00","dateModified":"2024-03-21T11:45:29+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-the-data-of-the-current-row-in-layui\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-the-data-of-the-current-row-in-layui\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-the-data-of-the-current-row-in-layui\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How can I retrieve the data of the current row in 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\/23786905eb7b377f45ddb01c17da7671","name":"Liam","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8d37ed3e7f770dde8bf069ba0b4298688028c3abaacf1131742fc1352d174ebd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8d37ed3e7f770dde8bf069ba0b4298688028c3abaacf1131742fc1352d174ebd?s=96&d=mm&r=g","caption":"Liam"},"sameAs":["http:\/\/Wilson"],"url":"https:\/\/www.silicloud.com\/blog\/author\/liamwilson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17793","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\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=17793"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17793\/revisions"}],"predecessor-version":[{"id":51429,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17793\/revisions\/51429"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=17793"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=17793"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=17793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}