Question

我正在创建一个表格，概述用户去过的事件。我为此创建了一个表。我想知道的是根据用户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>

这是我的javascript代码：

var Append = function (waardes) {console.log("halloblo")

 var newEvent = $('#modal2').clone(true);
 newEvent.attr('id',waardes.ID);
 console.log(newEvent);

 var eventnaam = newEvent.find('#eventnaam');
 eventnaam.text(waardes.Naam);
 console.log(eventnaam);

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

}

我已经检查过我的功能是否附加！

Answer 1

您只需尝试this

我用一个小例子更新了你的小提琴，你怎么能这样做。

您可以添加行和列

HTML

<form name="myform" id="myform">
  <table id="blacklistgrid">
    <tr id="Row1">
      <td class="space">&nbsp;</td>
      <td>Red</td>
      <td>Yellow</td>
      <td>Green</td>
    </tr>
    <tr id="Row2">
      <td>
        <input type="text" placeholder="shade" name="shade" />
      </td>
      <td>
        <input type="checkbox" name="red" />
      </td>
      <td>
        <input type="checkbox" name="yellow" />
      </td>
      <td>
        <input type="checkbox" name="green" />
      </td>
    </tr>
  </table>
  <button type="button" id="btnAdd">Add few more Rows!</button>
</br>
</br>
<button type="button" id="btnAddCol">Add new column</button>
</br>
</br>
<input type="submit"></input>
</form>

Jquery的

$(document).ready(function () {
  // Add Rows
 $('#btnAdd').click(function () {
   var count = 3,
   first_row = $('#Row2');
   while (count-- > 0) first_row.clone().appendTo('#blacklistgrid');
 });
 // Add Columns
 var myform = $('#myform'),
 iter = 0;
 $('#btnAddCol').click(function () {
   myform.find('tr').each(function(){
     var trow = $(this);
     if(trow.index() === 0){
       trow.append('<td>Col'+iter+'</td>');
     }else{
       trow.append('<td><input type="checkbox" name="cb'+iter+'"/></td>');
     }
   });
   iter += 1;
 });
});

的CSS

td {
  padding-right: 15px
}
.space {
  padding-right: 75px;
}

Answer 2

我在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>

这是我得到的结果：Screenshot of my result

Answer 3

这是一个使用纯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('table1', 0, '<td>test</td>')

或者像这样在右侧添加列：

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

这是一个例子：

https://jsbin.com/voxibufomu/1/edit?html,js,output

在Javascript中向表中添加列

3 个答案: