JavaScript_javascript スキルを使用してテーブルを動的に作成する方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript_javascript スキルを使用してテーブルを動的に作成する方法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:31 PM

JavaScript を使用してテーブルを動的に作成する 2 つの方法を共有します。具体的な実装は次のとおりです。

方法 1: 最も独創的な方法、要素を 1 つずつ作成します

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);

ログイン後にコピー

方法 2: テーブルオブジェクトに含まれる関数を使用します: 行を挿入し、列を挿入します

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>标签----表格体

ログイン後にコピー

動的作成と削除:
値を入力してテーブルを作成します:

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); 
   } 
  }

ログイン後にコピー

完全なコード:

<!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>

ログイン後にコピー

効果デモンストレーション:

上記は JavaScript を使用して動的にテーブルを作成する 2 つの方法です。気に入っていただければ幸いです。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7642

CakePHP チュートリアル

1392

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

150

Related knowledge

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

誰がより多くのPythonまたはJavaScriptを支払われますか？ Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

javascriptの分解：それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は？ Apr 04, 2025 pm 05:09 PM

同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は？データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...

Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は？または： Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか？ Apr 04, 2025 pm 05:36 PM

この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト（https://www.shisido.co.co.jp/sb/wonderland/）と同様の達成方法について説明します。

Console.log出力の違い結果：なぜ2つの呼び出しが異なるのですか？ Apr 04, 2025 pm 05:12 PM

Console.log出力の違いの根本原因に関する詳細な議論。この記事では、Console.log関数の出力結果の違いをコードの一部で分析し、その背後にある理由を説明します。 �...

JavaScriptは学ぶのが難しいですか？ Apr 03, 2025 am 12:20 AM

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1）変数、データ型、関数などの基本概念を理解します。2）非同期プログラミングをマスターし、イベントループを通じて実装します。 3）DOM操作を使用し、非同期リクエストを処理することを約束します。 4）一般的な間違いを避け、デバッグテクニックを使用します。 5）パフォーマンスを最適化し、ベストプラクティスに従ってください。