Question

我试图让页面为每个表添加行和五个单元格，但是我遇到了一些问题。我首先将行附加到表中，然后循环遍历并向每行添加五个单元格，但每当我在Web浏览器中运行它时，它就会生成：

this.

我希望单元格成为表格行的子项。

function addRows(ramnt) {
  if(ramnt > 0){
    var cellcount = 5;
    var tccount = 0;
    table.append('<tr>');
    console.log('Appended <tr>');
    while(tccount < cellcount){
        tccount = tccount + 1;
        table.append('<td id="Cell-' + tccount  + '" class="gencell"></td>');
    } 
    if (tccount = cellcount){
      table.append('</tr>');
      ramnt = ramnt - 1;
      addRows(ramnt);
    }
  }
}

console.log('Working');
var table = $('Table');
addRows(5);

Answer 1

我建议让你的功能更有活力。以下是我的建议：

function addRows(rc, to) {
  if(rc > 0){
    var cellcount = 5;

    for(var i = 0; i < rc; i++){
        var row = $("<tr>", { id: "Row-" + i });
        for(var c = 0; c < cellcount; c++){
            row.append("<td id='Cell-" + c + "' class='gencell'></td>");
        }
        to.append(row);
        console.log("Row " + i + " created");
    }
    return true;
  } else {
    return false;
  }
}

然后你可以像这样传递行数和表对象：

addRows(5, $("table"));

正如我所说，我建议你这样设置你的桌子：

<table id="myTable"></table>

这样，如果您以后添加另一个表或执行不同的操作，您仍然可以使用相同的代码：

addRows(5, $("#myTable"));

工作示例：https://jsfiddle.net/Twisty/Lysr2n5v/

您可以进一步写入函数以接受X行数，每行N个单元格数和表格对象：https://jsfiddle.net/Twisty/Lysr2n5v/2/

function addRows(rc, cc, to) {
  if(rc > 0){
    for(var i = 0; i < rc; i++){
        var row = $("<tr>", { id: "Row-" + i });
        for(var c = 0; c < cc; c++){
            row.append("<td id='Cell-" + c + "' class='gencell'></td>");
        }
        to.append(row);
        console.log("Row " + i + " created");
    }
    return true;
  } else {
    return false;
  }
}

Answer 2

当你调用table.append('<tr>')时，jQuery会插入开始和结束标记。我试过这个：

然后你调用table.append('<td id="Cell-' + tccount + '" class="gencell"></td>');，它会在表格的末尾附加td元素，因此它会追溯到你之前添加的tr。

您需要做的就是插入tr，然后选择此tr并附加到其中。所以像这样： table.find('tr:last').append('<td id="Cell-' + tccount + '" class="gencell"></td>');

Answer 3

您需要创建一行，将所有列附加到该行，然后将该行附加到表中，如下所示。

我还建议添加逻辑来检查表中已存在的列数，并确保不要添加比现在更多的列，因为它们无效。

以下内容：

addRows(5,5) - 将为页面上的每个表添加5行，其中每行与当前表具有相同数量的列，如果表当前没有任何列，则为5列

addRows(5,5,'#myTable') - 将向表中添加5行，其中id为myTable，其中每行与当前表具有相同数量的列，如果表当前没有任何列，则为5列< / p>

＆＃13;

function addRows(rowCount, colCount, table) {
    var $tables= table ? $(table) : $('table');
    $tables.each(function(){
      console.log('table');
      $this=$(this);
      colCount =$this.find('tr:eq(0)').find('td').length || colCount // limit the number of added cols to the numer already present
    	for(r=0;r<rowCount;r++){
         var $row=$('<tr>');
         for(c=0;c<colCount;c++){
            $row.append('<td>');
         }
         $this.append($row);
      }
    });
}
addRows(5,5);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1"></table>
<br>
<br>
<br>
<br>
<br>

<table border="1"><tr>
  <td>some content</td>
  <td>some content</td>
  <td>some content</td>
</tr></table>

＆＃13;

添加表格行和单元格

3 个答案: