XUL中的列表操作
XUL中的列表操作
提问于 2011-09-22 14:21:03
我正在尝试找出一种在XUL中编辑/添加/删除列表中的项的简单方法。我最初的想法是有一个单独的文件来处理所有这些事情，但是我不确定如何用另一个文件影响主XUL。到目前为止，我的清单如下所示：
<?xml version = "1.0"?>
<!DOCTYPE window>
<window title = "Hello"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
<script>
</script>
<listbox id = "mainList" flex = "1">
<listhead>
<listheader label = "Album Name"/>
<listheader label = "Artist"/>
<listheader label = "Year"/>
<listheader label = "Sales"/>
<listheader label = "Rating"/>
<listheader label = "Genre"/>
<listheader label = "Edit" />
<listheader label = "Delete"/>
</listhead>
<listitem id = "1">
<listcell label = "OK Computer"/>
<listcell label = "Radiohead"/>
<listcell label = "1997"/>
<listcell label = "Platinum"/>
<listcell label = "5/5"/>
<listcell label = "Alternative Rock"/>
<button label = "Edit" oncommand= "editItem()"/>
<button label = "Delete" oncommand = "deleteItem()"/>
</listitem>
<listitem>
<listcell label = "The Moon and Antarctica"/>
<listcell label = "Modest Mouse"/>
<listcell label = "2000"/>
<listcell label = "Gold"/>
<listcell label = "4.5/5"/>
<listcell label = "Alternative Rock"/>
<button label = "Edit"/>
<button label = "Delete"/>
</listitem>
<listitem>
<listcell label = "Pinkerton"/>
<listcell label = "Weezer"/>
<listcell label = "1996"/>
<listcell label = "Gold"/>
<listcell label = "5/5"/>
<listcell label = "Alternative Rock"/>
<button label = "Edit"/>
<button label = "Delete"/>
</listitem>
<listitem>
<listcell label = "Helplessness Blues"/>
<listcell label = "Fleet Foxes"/>
<listcell label = "2011"/>
<listcell label = "Gold"/>
<listcell label = "4/5"/>
<listcell label = "Folk Pop"/>
<button label = "Edit"/>
<button label = "Delete"/>
</listitem>
</listbox>
</window>很简单，但我搞不懂我需要什么javascript才能让按钮真正工作。理想情况下，我希望有一个Add按钮，它将打开一个新窗口，其中每一列都有空白字段，然后将新行添加到列表中。实现这一目标的最佳方法是什么？
回答 1
Stack Overflow用户
回答已采纳
发布于 2011-09-22 15:54:46
您可以使用regular DOM manipulation functions。在动态添加项目时，如果您有一个可以克隆和修改的“模板”，则会更容易，例如：
<listitem id="template" hidden="true">
<listcell class="album"/>
<listcell class="title"/>
<listcell class="year"/>
<listcell class="group"/>
<listcell class="rating"/>
<listcell class="category"/>
<button label="Edit" oncommand="editItem()"/>
<button label="Delete" oncommand="deleteItem()"/>
</listitem>然后可以添加一个新项目，如下所示：
var item = document.getElementById("template").cloneNode(true);
item.removeAttribute("id");
item.removeAttribute("hidden");
item.getElementsByClassName("album")[0].setAttribute("label", albumName);
item.getElementsByClassName("title")[0].setAttribute("label", songName);
...
document.getElementById("mainList").appendChild(item);更改现有项的文本与此类似。您必须从某个地方获取新文本-添加文本字段进行编辑是您的责任，但是，列表没有内置的编辑功能。
删除项目显然更简单：
var item = document.getElementById("item1");
item.parentNode.removeChild(item);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7510393
复制相关文章
相似问题
腾讯云开发者
