想使用 Kotlin DSL for HTML 来这样写前端的代码码?

简介: private fun renderBooks(data: Array) { val books = document.create.
    private fun renderBooks(data: Array<String>) {
        val books = document.create.div("books") {
            table("table table-hover") {
                thead {
                    tr {
                        th {
                            +"ID"
                        }
                        th {
                            +"Name"
                        }
                    }
                }
                tbody {
                    data.forEachIndexed { index, s ->
                        tr {
                            td {
                                +"$index"
                            }
                            td {
                                +s
                            }
                        }
                    }
                }
            }
        }
        document.getElementById("books")?.appendChild(books)
    }

完整实例代码参考:https://github.com/Jason-Chen-2017/kotlin-js-gradle-demo

kotlinx.html参考文档:https://github.com/Kotlin/kotlinx.html

相关文章
|
18天前
|
前端开发 小程序 Java
uniapp上传图片 前端以及java后端代码实现
uniapp上传图片 前端以及java后端代码实现
32 0
|
21天前
|
缓存 前端开发
前端代码整洁与规范之CSS篇
【4月更文挑战第2天】 前端代码整洁与规范之CSS篇
41 4
|
1月前
|
JSON 前端开发 Java
layui上传图片,前端直接拷代码,后端……
layui上传图片,前端直接拷代码,后端……
29 0
|
9天前
|
前端开发
HTML代码示例
HTML代码示例
12 1
|
9天前
|
搜索推荐
当使用HTML代码时,一些常见的问题
当使用HTML代码时,一些常见的问题
9 0
|
10天前
错误或拦截页面的html代码
错误或拦截页面的html代码
14 0
错误或拦截页面的html代码
|
10天前
|
前端开发 JavaScript 算法
比较流行的前端代码书写规范都有哪些
【4月更文挑战第13天】前端代码规范增进代码可读性和团队协作,包括缩进(用2空格)、命名(变量 camelCase,常量 MY_CONSTANT,类 PascalCase)、注释、语句与表达式、错误处理、代码复用。文件命名规范涉及扩展名、目录结构、简洁文件名、入口文件和配置文件命名。遵循这些规范能提高代码一致性,但需按项目需求调整。不断学习新规范以适应前端技术发展。
14 1
|
10天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
12天前
|
监控 前端开发 JavaScript
如何使用浏览器调试前端代码?
【4月更文挑战第11天】前端开发中,浏览器调试是关键技能,能提升代码质量。本文介绍了如何使用浏览器的调试工具:1) 打开调试窗口(F12或右键检查);2) Elements标签页检查DOM结构和样式;3) Console调试JavaScript,查看日志和错误信息;4) Sources设置断点调试JS文件;5) 利用Network、Performance和Memory等标签页优化性能。熟悉调试工具、利用日志和错误信息能有效定位问题,提高开发效率。
33 7
|
18天前
|
搜索推荐 前端开发 UED
html页面实现自动适应手机浏览器(一行代码搞定)
html页面实现自动适应手机浏览器(一行代码搞定)
18 0