Question

我正在尝试使用javascript将行插入到html表中。我已创建表，只需单击按钮即可成功添加行。但是，我希望能够在加载时使用来自多个数组的元素填充行。该按钮只是为了确保添加行。

<html>
 <input type="button" value="Add row" onclick="javascript:appendRow()"     class="append_row"/>
 <br/><br/></p>
 <table id="my_table" align="center" cellspacing="0" cellpadding="0" border="0">
 <tr>
<td>Name</td>
<td>Age</td>
 <td>Sex</td>
 </tr>

</table>
<p></center></p>

 <script type="text/javascript" language="javascript">
 function appendRow(){


var names = ["Paul", "Mike", "Linda"];
var ages = ["16", "23", "44"];
var male_female = ["M", "M", "F"];
var tbl = document.getElementById('my_table'); // table reference
// append table row
var row = tbl.insertRow(tbl.rows.length);

// insert table cells to the new row
   var row = tbl.insertRow();

for(var i=0;i<tbl.rows[0].cells.length;i++)
    createCell(row.insertCell(i), i, 'row');

 }

function createCell(cell, text, style){
var div = document.createElement('div'); // create DIV element
var txt = document.createTextNode(text); // create text node
div.appendChild(txt);                    // append text node to the DIV
div.setAttribute('class', style);        // set DIV class attribute
div.setAttribute('className', style);    // set DIV class attribute for IE (?!)
cell.appendChild(div);                   // append DIV to the table cell
}
</script>
<style>
 .row{background-color:#FFD6D6;width:43px;margin:3px;}
 .col{background-color:#D6FFD6;width:43px;margin:3px;}
  table#my_table{border-collapse:collapse;}
    table#my_table td{width:50px;height:27px;border:1px solid #D3D3D3;font-  size:10pt;text-align:center;padding:0;}
   .append_row{background-color:#FFD6D6;border:1px #ccc solid;}
   .append_column{background-color:#D6FFD6;border:1px #ccc solid;}
   .delete{background-color:#eee;border:1px #ccc solid;}
   </style>
   </html>

Answer 1

在你的for循环中，尝试类似：

var j = tbl.rows.length - 1;
for (var i=0;i<tbl.rows[0].cells.length;i++) {
  var cell_text = '';
  if (i == 0) {
     cell_text = name[j];
  } else if (i == 1) {
     cell_text = ages[j];
  } else if (i == 2) {
     cell_text = male_female[j];
  }
  createCell(row.insertCell(i), cell_text, 'row');

 }

Answer 2

您忘记了HTML语法中的“ body ”标记。你可以在onLoad变量中调用你的函数，所以它会在加载的页面之后被调用。

使用javascript在HTML表格中添加行

2 个答案: