在Javascript中将列添加到表中

我正在创建一个表，该表概述了用户访问的事件。我已经为此创建了一个表。我想知道的是，根据用户id检查他是否注册了某个事件，并显示这些事件

以下是我的Html代码：

<div id="modal2" class="modal modal-fixed-footer col l4 ">
  <div class="modal-content col l4">
    <table class="centered bordered">
      <thead>
        <tr>
          <th data-field="id">Datum</th>
          <th data-field="name">Event</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td id="datum">11/04/2014</td>
          <td id="eventnaam">Cleantech</td>
        </tr>

      </tbody>
    </table>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Sluiten</a>
  </div>
</div>

我已经检查了我是否进入我的函数Append

你试试看

我用一个小例子更新了你的小提琴，说明你是如何做到的

可以添加行和列

Html

---

我在JS中尝试了以下代码：

var Append = function (waardes) {
 var first_row =$('#row2');
 first_row.clone(true).appendTo('#modal2');

 var eventnaam = first_row.find('#eventnaam');
 eventnaam.text(waardes.Naam);

 var eventdatum = first_row.find('#datum');
 eventdatum.text(waardes.Datum);
}

这是我的HTML代码：

<div id="modal2" class="modal modal-fixed-footer col l4 ">
  <div class="modal-content col l4">
    <table class="centered bordered">
      <thead>
        <tr>
          <th data-field="id">Datum</th>
          <th data-field="name">Event</th>
        </tr>
      </thead>

      <tbody>
        <tr id="row2">
          <td id="datum"></td>
          <td id="eventnaam"></td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Sluiten</a>
  </div>
</div>

资料
事件

---

这是我得到的结果：

这里有一个函数，可以使用纯javascript向表中添加列：

function addColumnToTableJS(table, pos, content){
  if (typeof table === 'string'){
      table = document.getElementById(table);
  }
  var columns = table.rows[0].getElementsByTagName('td').length;
  if (!pos && pos !== 0){
    pos = columns;
  }
  var rowregex = new RegExp('{ROWINDEX}', 'g');
  var colregex = new RegExp('{COLINDEX}', 'g');
  for (var r=0; r<table.rows.length; r++){
    var cell = table.rows[r].insertCell(pos);
    cell.innerHTML = content
      .replace(rowregex, String.fromCharCode(65 + r))
      .replace(colregex, columns + 1); 
  }
}

函数addColumnToTableJS（表、位置、内容）{
如果（表的类型=='string'）{
table=document.getElementById（table）；
}
var columns=table.rows[0]。getElementsByTagName（'td'）。长度；
如果（！pos&&pos！==0）{
pos=列；
}
var rowregex=newregexp（'{ROWINDEX}'，'g'）；
var colregex=newregexp（'{COLINDEX}'，'g'）；
对于（var r=0；Ryan如果您继续进行
克隆
尝试使用css选择器进行选择，您将在DOM中获得重复的
id
。抱歉，我不明白。您能举个例子吗？问题是什么？可能重复@Liam我如何复制表中的行。我想使用数据库中的值复制此项，如果是否要对行执行此操作？是的，我要根据数据库中的值添加多行。您可以检查此操作。我尝试了您的代码，但问题是我的数据库中有多个事件，并且没有将事件放置在新行上。否，请参阅下面的注释
td {
  padding-right: 15px
}
.space {
  padding-right: 75px;
}

var Append = function (waardes) {
 var first_row =$('#row2');
 first_row.clone(true).appendTo('#modal2');

 var eventnaam = first_row.find('#eventnaam');
 eventnaam.text(waardes.Naam);

 var eventdatum = first_row.find('#datum');
 eventdatum.text(waardes.Datum);
}

<div id="modal2" class="modal modal-fixed-footer col l4 ">
  <div class="modal-content col l4">
    <table class="centered bordered">
      <thead>
        <tr>
          <th data-field="id">Datum</th>
          <th data-field="name">Event</th>
        </tr>
      </thead>

      <tbody>
        <tr id="row2">
          <td id="datum"></td>
          <td id="eventnaam"></td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Sluiten</a>
  </div>
</div>

function addColumnToTableJS(table, pos, content){
  if (typeof table === 'string'){
      table = document.getElementById(table);
  }
  var columns = table.rows[0].getElementsByTagName('td').length;
  if (!pos && pos !== 0){
    pos = columns;
  }
  var rowregex = new RegExp('{ROWINDEX}', 'g');
  var colregex = new RegExp('{COLINDEX}', 'g');
  for (var r=0; r<table.rows.length; r++){
    var cell = table.rows[r].insertCell(pos);
    cell.innerHTML = content
      .replace(rowregex, String.fromCharCode(65 + r))
      .replace(colregex, columns + 1); 
  }
}

addColumnToTableJS('table1', 0, '<td>test</td>')

addColumnToTableJS('table1', null, '<td>test</td>')