js操作テーブル例（個人的な経験）_javascriptスキル-jsチュートリアル-php.cn

面接中にこんな問題に遭遇したことを思い出します。フォームがあり、入力ボックスが 4 つと結合ボタンがあり、入力ボックスは次のようになります。どの行からどの行へ、どの列からどの列へ。 . を選択し、結合するボタンをクリックします。学校を出たときはJSのことを少しだけ知っていたけど、全然できなかった！考えてみれば、この問題は基礎力がしっかりしているかを試される問題なのです！興味があれば、自分でやってみて、できるかどうか試してみることができます。質問のスクリーンショット:
js操作テーブル例（個人的な経験）_javascriptスキル
今、この質問をしています。簡単そうに見えますが、それでも時間がかかりました。もしかしたら私の考えが間違っているのでしょうか？肝心なのはjsを使ってhtmlを操作することですが、行の追加、行の削除、列の追加、列の削除を実装しましたが、主にテーブルがめちゃくちゃになってしまうため、完全には実現できません。この質問を投稿してください。興味のある同僚は、時間があるときにこの質問を勉強して、達成できるかどうかを確認してください。主な問題はセルの結合です。セルの結合の問題を解決するのにも役立ちます。

私が自分で実装したコードの一部:
HTML 部分は次のように記述します

コードをコピーしますコード

< ;td align=" center"colspan="2">< ;/td>

appendChild を使用してテーブルを生成します

コードをコピー

コードは次のとおりです: function init(){ _table=document.getElementById ( "テーブル "); _table.width="800px";

for(var i=1;i var row =document.createElement ("tr");
row.id=i;
for(var j=1;j var cell=document.createElement ("td ") ;
Cell.id =i "/" j;
cell.appendChild(document.createTextNode ("cell.id "column"));
row.appendChild (セル); }
document.getElementById("newbody").appendChild (row);
}
}

行を追加し、appendChild メソッドを使用して

コードをコピー

コードは次のとおりです:

 
function addRow(){ 
var length=document.getElementById("table").rows.length; 
/*document.getElementById("newbody").insertRow(length); 
 document.getElementById(length 1).setAttribute("id",length 2);*/ 
 var tr=document.createElement("tr"); 
 tr.id=length 1; 
 var td=document.createElement("td"); 
 for(i=1;i td.id=tr.id "/" i; 
 td.appendChild(document.createTextNode("第" td.id "列")); 
 tr.appendChild(td); 

 } 
 document.getElementById("newbody").appendChild (tr); 
} 

追加行の另一方法insertRow 書道

复制代代以下のように:

 
function addRow_withInsert(){ 
 varrow=document.getElementById("table").insertRow( document.getElementById("table").rows.length); 
 var rowCount =document.getElementById("table").rows.length; 

 var countCell=document.getElementById("table").rows.item(0).cells.length; 
 for(var i=0;i var cell=row.insertCell(i); 

 cell.innerHTML="新" (rowCount) "/" (i 1) "列"; 
 cell.id=(rowCount) "/" (i 1); 

 } 
} 

删除行，採用deleteRow(row Index) 書道

复制代码代码如下:

 
/*删除行，採用deleteRow(row Index)*/ 
function RemoveRow(){ 
/* var row=document. getElementById("2"); 
 varindex=row.rowIndex; 
 alert(index);*/ 
 document.getElementById("newbody").deleteRow(document.getElementById(document.getElementById("table").rows.length).rowIndex); 
} 

追加列，採用insertCell(列位置)メソッド写道

复制代码代コード如下:

 
function addCell(){ 
/*document.getElementById("table").rows.item(0).cells.length 
用来获得表格的列数 
*/ 
for(var i=0;i var cell=document.getElementById("table"). rows[i].insertCell(2); 
 cell.innerHTML="第" (i 1) "/" 3 "列"; 

} 
} 

删削除列，採用deleteCell(列位置)的方法書道

复制代代码如下:

 
/*删除列，採用deleteCell(列位置)の方法*/ 
function RemoveCell(){ 
 for(var i=0;i document.getElementById("table").rows[i].deleteCell(0); 
 } 
} 

合并单元格（未实现）写道
我的代码有问题，主是表格会乱掉，一直不有改好：

复制代码代码如下:

 
function rebulid(){ 
var beginRow=document.getElementById( "beginRow").value;/*开始行*/ 
var endRow=document.getElementById("endRow").value;/*结束行*/ 

var beginCol=document.getElementById(" beginCol").value;/*开始列*/ 
var endCol=document.getElementById("endCol").value;/*结束列*/ 

var tempCol=beginRow "/" beginCol; /*定位変更が必要なプロパティの列*/ 
alert(tempCol); 
var td=document.getElementById(tempCol); 

/*删除要合并的单元格*/ 
for(var x=beginRow;x<=endRow;x ){ 
 for(var i=beginCol;i<=endCol;i ){ 
 if(x==beginRow){ 

 document.getElementById("table").rows[x].deleteCell(i 1); 

 } 
 else{ 

 document.getElementById("table").rows[x].deleteCell(i); 

 } 

 } 
 } 
 td.rowSpan=(endRow-beginRow) 1; 
} 

行から row
<入力タイプから="text " name="beginCol" id="beginCol" value=""/> 列を入力します。 td>