suchen

Heim  >  Artikel  >  Web-Frontend  >  So erstellen Sie dynamisch eine Tabelle mit JavaScript_Javascript-Kenntnissen

So erstellen Sie dynamisch eine Tabelle mit JavaScript_Javascript-Kenntnissen

WBOY
WBOYOriginal
2016-05-16 15:31:222019Durchsuche

Zwei Möglichkeiten zum dynamischen Erstellen von Tabellen mit JavaScript werden mit Ihnen geteilt. Die spezifische Implementierung ist wie folgt

Methode 1: Die originellste Methode: Elemente einzeln erstellen 

var a1=document.createElement("table");

var a2=document.createElement("tbody");

var a3=document.createElement("tr");

var a4=document.createElement("td");

//开始appendchild()追加各个元素

a3.appendChild(a4);

a2.appendChild(a3);

a1.appendChild(a2);

Methode 2: Verwenden Sie die im Tabellenobjekt enthaltenen Funktionen: Zeilen einfügen und Spalten einfügen

var tabNode=document.createElement("table");

var trNode=tabNode.insertRow();

var tdNode=trNode.insertCell;

tabNode.innerHTML="这是采用table对象里面的函数创建的"
注意：利用原始方法，一个个createElement时候，必须要添加一个tbody对象
//获取<table>标签的兄弟节点

// var node3=tabnode.previousSibling;//前一个节点 获取对此对象的上一个兄弟对象的引用。

// alert("previous--node3:"+node3);//#text

// 如果<table>后面有回车符，高版本的IE和火狐会识别成 “空白文本”#text，

// 而低版本IE会直接越过-----不光是<table>节点，其它节点也一样

// 表格的,<table>标签和<tr>标签中间，其实还隐藏着一个<tbody>标签----表格体

Dynamisches Erstellen und Löschen:
Erstellen Sie eine Tabelle, indem Sie Werte eingeben: 

function createTable(){ 
    tableNode=document.createElement("table");//获得对象 
   tableNode.setAttribute("id","table") 
   var row=parseInt(document.getElementsByName("row1")[0].value);//获得行号 
   //alert(row); 
   if(row<=0 || isNaN(row) ){ 
    alert("输入的行号错误，不能创建表格，请重新输入："); 
    return; 
   } 
   var cols=parseInt(document.getElementsByName("cols1")[0].value); 
   if(isNaN(cols) || cols<=0){ 
    alert("输入的列号错误，不能创建表格，请重新输入："); 
    return; 
   } 
   //上面确定了 现在开始创建 
   for(var x=0;x<row;x++){ 
    var trNode=tableNode.insertRow(); 
    for(var y=0;y<cols;y++){ 
     var tdNode=trNode.insertCell(); 
     tdNode.innerHTML="单元格"+(x+1)+"-"+(y+1); 
    } 
   } 
   document.getElementById("div1").appendChild(tableNode);//添加到那个位置 
  }

Zeile löschen: 

function delRow(){ 
  //要删除行，必须得到table对象才能删除，所以在创建的时候必须要设置table对象的 id 方便操作 
  var tab=document.getElementById("table");//获得table对象 
  if(tab==null){ 
   alert("删除的表不存在！") 
   return; 
  } 
  var rows=parseInt(document.getElementsByName("delrow1")[0].value);//获得要删除的对象 
  if(isNaN(rows)){ 
   alert("输入的行不正确。请输入要删除的行。。。"); 
   return; 
  } 
  if (rows >= 1 && rows <= tab.rows.length) { 
   tab.deleteRow(rows-1); 
   }else{ 
    alert("删除的行不存在！！"); 
    return ; 
   } 
   
 }

Spalte löschen: 

//删除列要麻烦些， 要通过行来进行删除 
  // 一行的cells的长度就是列的个数 
  //tab.rows[x].deleteCell(cols-1) 
  function delCols(){ 
   //获得table对象 
   var tab=document.getElementById("table"); 
    
   if(tab==null){ 
    alert("删除的表不存在！！"); 
    return ; 
   } 
   //获得文本框里面的内容 
   var cols=parseInt(document.getElementsByName("delcols1")[0].value); 
   //检查是否可靠 
   if(isNaN(cols)){ 
    alert("输入不正确。请输入要输出的列。。"); 
    return; 
   } 
   if(!(cols>=1 && cols<tab.rows[0].cells.length)){ 
    alert("您要删除的行不存在！！"); 
    return; 
   } 
   for(var x=0;x<tab.rows.length;x++){//所有的行 
    tab.rows[x].deleteCell(cols-1); 
   } 
  }

Vollständiger Code: 

<!DOCTYPE html> 
<html> 
 <head> 
 <title>createTable2.html</title> 
 <style type="text/css"> 
  table{ 
   border:#00ffff solid 2px; 
   border-collapse:collapse; 
  } 
  td{ 
   border:#8080ff solid 2px; 
    padding:10px; 
  } 
 </style> 
 <script type="text/javascript"> 
  var tableNode; 
  function createTable(){ 
    tableNode=document.createElement("table");//获得对象 
   tableNode.setAttribute("id","table") 
   var row=parseInt(document.getElementsByName("row1")[0].value);//获得行号 
   //alert(row); 
   if(row<=0 || isNaN(row) ){ 
    alert("输入的行号错误，不能创建表格，请重新输入："); 
    return; 
   } 
   var cols=parseInt(document.getElementsByName("cols1")[0].value); 
   if(isNaN(cols) || cols<=0){ 
    alert("输入的列号错误，不能创建表格，请重新输入："); 
    return; 
   } 
   //上面确定了 现在开始创建 
   for(var x=0;x<row;x++){ 
    var trNode=tableNode.insertRow(); 
    for(var y=0;y<cols;y++){ 
     var tdNode=trNode.insertCell(); 
     tdNode.innerHTML="单元格"+(x+1)+"-"+(y+1); 
    } 
   } 
   document.getElementById("div1").appendChild(tableNode);//添加到那个位置 
  } 
  function delRow(){ 
   //要删除行，必须得到table对象才能删除，所以在创建的时候必须要设置table对象的 id 方便操作 
   var tab=document.getElementById("table");//获得table对象 
   if(tab==null){ 
    alert("删除的表不存在！") 
    return; 
   } 
   var rows=parseInt(document.getElementsByName("delrow1")[0].value);//获得要删除的对象 
   if(isNaN(rows)){ 
    alert("输入的行不正确。请输入要删除的行。。。"); 
    return; 
   } 
   if (rows >= 1 && rows <= tab.rows.length) { 
    tab.deleteRow(rows-1); 
    }else{ 
     alert("删除的行不存在！！"); 
     return ; 
    } 
    
  } 
  //删除列要麻烦些， 要通过行来进行删除 
  // 一行的cells的长度就是列的个数 
  //tab.rows[x].deleteCell(cols-1) 
  function delCols(){ 
   //获得table对象 
   var tab=document.getElementById("table"); 
    
   if(tab==null){ 
    alert("删除的表不存在！！"); 
    return ; 
   } 
   //获得文本框里面的内容 
   var cols=parseInt(document.getElementsByName("delcols1")[0].value); 
   //检查是否可靠 
   if(isNaN(cols)){ 
    alert("输入不正确。请输入要输出的列。。"); 
    return; 
   } 
   if(!(cols>=1 && cols<tab.rows[0].cells.length)){ 
    alert("您要删除的行不存在！！"); 
    return; 
   } 
   for(var x=0;x<tab.rows.length;x++){//所有的行 
    tab.rows[x].deleteCell(cols-1); 
   } 
  } 
  
 </script> 
 </head> 
 
 <body> 
 行:<input type="text" name="row1"/> 
 列:<input type="text" name="cols1"/> 
 <input type="button" value="创建表格" onclick="createTable()"/><br/> 
  
 <input type="text" name="delrow1"/> 
 <input type="button" value="删除行" onclick="delRow()"/><br/> 
  
 <input type="text" name="delcols1"/> 
 <input type="button" value="删除列" onclick="delCols()"/><br> 
 <div id="div1"></div> 
 </body> 
</html>

Wirkungsdemonstration:

Die oben genannten sind zwei Möglichkeiten, Tabellen mithilfe von JavaScript dynamisch zu erstellen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung häufig verwendeter Funktionstypen in JavaScript_Javascript-KenntnissenNächster Artikel：Detaillierte Erläuterung häufig verwendeter Funktionstypen in JavaScript_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen