使用javascript在HTML表中添加行_Javascript_Html

使用javascript在HTML表中添加行

javascript html

使用javascript在HTML表中添加行,javascript,html,Javascript,Html,我正在尝试使用javascript将行插入html表中。我已经创建了表，并且可以通过单击按钮成功地添加行。但是，我希望能够在加载时使用来自多个数组的元素填充行。该按钮仅用于确保正在添加行 <html> <input type="button" value="Add row" onclick="javascript:appendRow()" class="append_row"/> <br/><br/></p> <ta

我正在尝试使用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>





名称
年龄
性

函数appendRow（）{
变量名称=[“保罗”、“迈克”、“琳达”]；
变量年龄=[“16”、“23”、“44”]；
变量male_female=[“M”、“M”、“F”]；
var tbl=document.getElementById（'my_table'）；//表引用
//追加表行
var row=tbl.insertRow（tbl.rows.length）；
//将表格单元格插入新行
var row=tbl.insertRow（）；
对于（var i=0；i您忘记了HTML语法中的“body”标记。您可以在onLoad变量中调用函数，因此它将在页面加载后被调用。
在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');

 }

var j=tbl.rows.length-1；
对于（var i=0；激怒setAttribute
调用和IE hack：因此，不要在HTML文档中使用getAttribute
/setAttribute
。最好坚持使用DOM级别1 HTML属性，如div.className=style
。是的，我暂时忽略了该代码，直到我看到它真正起作用为止。我正在寻找可以使用的代码。）将这些元素放在行中。似乎在大多数情况下都有效。它从数组的第二个元素开始，但确实将所有元素都放在需要的位置。感谢您的帮助。有没有办法让它根据数组中的元素数或长度创建多行？我将使用此方法处理未知长度和长度的数组我想您需要j=tbl.rows.length-2来解释标题行。您可以使用外部for循环：for（var j=0；j