Question

我需要使用Firebase实时数据库向动态创建的表中添加按钮。

我已经尝试使用下面的代码片段来实现它。

function createElementWithText(tag, text) {
    var elm = document.createElement(tag);
    elm.textContent = text;
    return elm;
    }

   var tr = document.createElement('tr');
   var td = document.createElement('td');
   var button = document.createElement('button');

   tr.appendChild(createElementWithText('td', userName));
   tr.appendChild(createElementWithText('td', userEmail));
   tr.appendChild(createElementWithText('td', userPassword));
   tr.appendChild(createElementWithText('td',createElementWithText('button', input.innerHTML = 'type="button" class="abc" onclick="userAction()"')));
   appendingTo.appendChild(tr);

    }

这是我的完整代码，

var dbRefUsers = firebase.database().ref().child('Web App').child('Users');

  var appendingTo = document.getElementById("userlist");

dbRefUsers.on('child_added', gotNewChild, errData); 

function gotNewChild(userSnapshot){  

  var user = userSnapshot.val();

  var userName = user.Name;
  var userEmail = user.Email;
  var userPassword = user.Password;

  function userAction(){

  }

   function createElementWithText(tag, text) {
    var elm = document.createElement(tag);
    elm.textContent = text;
    return elm;
    }

   var tr = document.createElement('tr');
   var td = document.createElement('td');
   var button = document.createElement('button');

   tr.appendChild(createElementWithText('td', userName));
   tr.appendChild(createElementWithText('td', userEmail));
   tr.appendChild(createElementWithText('td', userPassword));
   tr.appendChild(createElementWithText('td',createElementWithText('button', button.innerHTML = 'type="button" class="abc" onclick="userAction()"')));
   appendingTo.appendChild(tr);

    }

 function errData(error){
    console.log("Error!")
    console.log(error);

 }

但是最后td显示的输出是[object HTMLInputElement]。

有人可以帮我解决这个问题吗？

Answer 1

您的函数返回一个数组。尝试使用传播运算符

tr.appendChild（... createElementWithText（'td'，userName））;

或

tr.appendChild（createElementWithText（'td'，userName）[0]）;

Answer 2

const createElementWithText = (tag, text) => {
  let elm = document.createElement(tag);
  if (text instanceof HTMLElement) {
    elm.appendChild(text);
  } else {
  elm.textContent = text;
  }
  return elm;
};

document.addEventListener('DOMContentLoaded', () => {
  let appendingTo = document.querySelector('table');
  let tr = document.createElement('tr');
  let td = document.createElement('td');
  let input = document.createElement('input');
  input.type = 'button';
  input.class = 'abc';
  input.value = 'click me';
  
  // changed to strings for now as I dont have full code.
  tr.appendChild(createElementWithText('td', 'userName'));
  tr.appendChild(createElementWithText('td', 'userEmail'));
  tr.appendChild(createElementWithText('td', 'userPassword'));

  tr.appendChild(createElementWithText('td', input));
  appendingTo.appendChild(tr);

});

<table></table>

Answer 3

function createElementWithText(tag, text, attributeObj = []) {
    var elm = document.createElement(tag);
    if (Object.keys(attributeObj).length > 0) {
        for (var key in attributeObj) {
            (key == 'className')
                elm.className = attributeObj[key];
            (key == 'type')
                elm.type = attributeObj[key];
        }
    }
    elm.append(text);

    return elm;
}

var tr = document.createElement('tr');
var td = document.createElement('td');

var attributeObj = [];
attributeObj['type'] = 'button';
attributeObj['className'] = 'abc';
attributeObj['id'] = 'test';

tr.appendChild(createElementWithText('td', userName));
tr.appendChild(createElementWithText('td', userEmail));
tr.appendChild(createElementWithText('td', userPassword));
tr.appendChild(createElementWithText('td', createElementWithText('input', 'button', attributeObj)));
appendingTo.appendChild(tr);

将按钮附加到从Firebase实时数据库动态创建的表中

3 个答案: