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

create checkbox dynamically using DOM JavaScript in XUL

本文关键字:JavaScript 动态 创建 复选框 DOM XUL      更新时间:2023-09-26

我想在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,我想在这个框中添加动态创建的组框复选框:

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

这就是解决方案:这里我已经动态地创建了组框,标题和复选框。

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;
}