Html Webix addRowCSS实现

我对使用HTML非常陌生。我被要求在一个项目中使用它，而我在这方面没有受过任何教育。这是我需要做的事情的分解。我需要有一个文本框的图表（我已经为webix提供的一些功能添加了一些功能），并且我希望有一些按钮，允许我添加或删除行。我也在使用webix数据表。这是我的按钮代码。目前，我只想在图表顶部添加一行。现在我只有添加行按钮。一旦我弄明白了这一点，我可以很容易地做删除

input type='button' class="sample_button" value='add row' onclick= grida.addRowCss(1, getElementById('grida').style.color = "black"); 输入type='button'class=“sample_button”value='add row'onclick=grida.addRowCss（1，getElementById（'grida'）。style.color=“black”）； 这是我的数据表代码

webix.ready(function(){ grida = webix.ui({ container:"testA", view:"datatable", columns:[ { id:"stage",editor:"text", header:"Stage", width:150}, { id:"component",editor:"text", header:"Component",width:200}, { id:"epic",editor:"text", header:"Epic" , width:200}, { id:"engineering", editor:"text", header:"Engineering", width:200, suggest:numSuggest}, { id:"design", editor:"text", header:"Design", width:200, suggest:numSuggest}, { id:"research",editor:"text", header:"Research", width:200, suggest:numSuggest}, { id:"notes", editor:"popup", header:"Notes", width:200} ], editable:true, autoheight:true, autowidth:true, data: [ {id: 1, stage:"Test 1", component:"Strategy", epic:"Design", engineering:2, design:0, research:0, notes: "This is a test"}, ] }); }); webix.ready（函数（）{ grida=webix.ui({ 容器：“testA”， 视图：“数据表”， 栏目：[ {id:“stage”，编辑器：“text”，标题：“stage”，宽度：150}， {id:“组件”，编辑器：“文本”，标题：“组件”，宽度：200}， {id:“epic”，编辑器：“text”，标题：“epic”，宽度：200}， {id:“工程”，编辑：“文本”，标题：“工程”，宽度：200，建议：numSuggest}， {id:“设计”，编辑器：“文本”，标题：“设计”，宽度：200，建议：numSuggest}， {id:“研究”，编辑：“文本”，标题：“研究”，宽度：200，建议：numSuggest}， {id:“注释”，编辑器：“弹出”，标题：“注释”，宽度：200} ], 是的， 自动高度：正确， 自动宽度：正确， 数据：[ {id:1，阶段：“测试1”，组件：“策略”，史诗：“设计”，工程：2，设计：0，研究：0，注释：“这是一个测试”}， ] }); }); 除了按钮外，所有功能都正常。按钮出现了，但什么也不做。 这是addRow webix函数的链接。

非常感谢您的任何帮助，特别是因为我对这一点一无所知。 谢谢

编辑1：

谢谢你的回答。所以现在我把我的按钮做成这样（在脚本之前）

输入type=“button”value=“Add row”onclick='Add_row（）' 该表与以前一样，但是在结束该表之后，我加入了add_row函数。我将包括表的最后一部分作为上下文

data: [ {id: 1, stage:"Test 1", component:"Strategy", epic:"Design", engineering:2, design:0, research:0, notes: "This is a test"} ] }); function add_row(){ grida.add({ stage:"Test 2", component:"Strategy", epic:"Design", engineering:2, design:0, research:0, notes: "This is a test" },2) } 数据：[ {id:1，阶段：“测试1”，组件：“策略”，史诗：“设计”，工程：2，设计：0，研究：0，注释：“这是一个测试”} ] }); 函数add_row（）{ grida.add({ 阶段：“测试2”， 构成部分：“战略”， 史诗：“设计”， 工程:2,， 设计：0， 研究：0， 注：“这是一个测试” },2) } 我也试过了

$$("grida").add(...) $$（“网格”）。添加（…）

---

无济于事。按钮在屏幕上，但不起作用。我想我在做一些不正常的事情，但我不确定是什么

您需要在代码片段中使用

add

而不是

addRowCss

• add

  添加新行

• addRowCss

  将css类添加到行中
  add（{stage:“test2”，component:“Second component”}）

---

谢谢您的帮助。据我所知，我做的每件事都是正确的，但按钮仍然不能正常工作。我编辑了原始问题以将代码更新为当前代码。请检查下一个代码段问题可能是由于

grida

var可见性而出现的。您可以尝试将

id:'grida'

添加到datatable的配置中，然后使用

$$（“grida”）。添加
问题是按钮不知道add\u row函数，所以我将javascript放在一个单独的文件中，解决了这个问题。谢谢你的帮助。
$$("grida").add(...)