在 XUL 中使用 DOM JavaScript 动态创建复选框答案

【问题标题】：create checkbox dynamically using DOM JavaScript in XUL在 XUL 中使用 DOM JavaScript 动态创建复选框
【发布时间】：2011-08-24 03:24:10
【问题描述】：

我想在 XUL 中使用 DOM JavaScript 为树值动态创建复选框：此函数用于获取我的 XUL 树的值：

function choose() {
  var tree = document.getElementById('myTodoListTree');
  for (var i = 0; i < tree.view.rowCount; i++) {
    if (tree.view.getCellValue(i, tree.columns.getColumnAt(0)) == 'true'){
      alert(
        tree.view.getCellText(i, tree.columns.getNamedColumn("name"))+"\n"+
        tree.view.getCellText(i, tree.columns.getNamedColumn("lastname"))+"\n"+
        tree.view.getCellText(i, tree.columns.getNamedColumn("gmail"))+"\n"+
        tree.view.getCellText(i, tree.columns.getNamedColumn("yahoo"))+"\n"+
        tree.view.getCellText(i, tree.columns.getNamedColumn("url"))+"\n"+
        tree.view.getCellText(i, tree.columns.getNamedColumn("facebook-id"))
      );
      var firstName= tree.view.getCellText(i, tree.columns.getNamedColumn("name"));
      var lastName= tree.view.getCellText(i, tree.columns.getNamedColumn("lastname"));
      var Gmail= tree.view.getCellText(i, tree.columns.getNamedColumn("gmail"));
      var Yahoo= tree.view.getCellText(i, tree.columns.getNamedColumn("yahoo"));
      var Facebook = tree.view.getCellText(i, tree.columns.getNamedColumn("url"));
      var FacebookId = tree.view.getCellText(i, tree.columns.getNamedColumn("facebook-id"));
    }
  }
  return arr;                   
}

这个mybox，我想在这个box中追加动态创建的groupbox复选框：

【问题讨论】：

标签： javascript dom checkbox xul

【解决方案1】：

最后，我学会了如何动态创建元素。

这是解决方案：这里我动态创建了组框、标题和复选框。

function choose()
{
alert('hi');
  var tree = document.getElementById('myTodoListTree');
  for (var i = 0; i < tree.view.rowCount; i++) {
   if (tree.view.getCellValue(i, tree.columns.getColumnAt(0)) == 'true'){

var empty = " ";
var contact = (tree.view.getCellText(i, tree.columns.getNamedColumn("name"))+ empty+
tree.view.getCellText(i, tree.columns.getNamedColumn("lastname"))+ empty+ "Contacts:");

var ggmail = tree.view.getCellText(i, tree.columns.getNamedColumn("gmail"));
var yyahoo = tree.view.getCellText(i, tree.columns.getNamedColumn("yahoo"));

  var existingEl  = document.getElementById('box');
  var capt   = document.createElement('groupbox');
  existingEl.appendChild(capt);
  var captionEl   = document.createElement('caption');
  capt.appendChild(captionEl);
  captionEl.setAttribute('label', contact );
  captionEl.setAttribute('style', 'color: blue;');


  var existing  = document.getElementById('box');
  var checkbox   = document.createElement('checkbox');
  capt.appendChild(checkbox);
  checkbox.setAttribute('label', ggmail );
  checkbox.setAttribute("checked", "false")
  checkbox.setAttribute('style', 'color: green;');

  var existing  = document.getElementById('box');
  var checkbox   = document.createElement('checkbox');
  capt.appendChild(checkbox);
  checkbox.setAttribute('label', yyahoo);
checkbox.setAttribute("checked", "false")
  checkbox.setAttribute('style', 'color: green;');

    }
  }
  return arr;

}

【讨论】：