面接中にこんな問題に遭遇したことを思い出します。フォームがあり、入力ボックスが 4 つと結合ボタンがあり、入力ボックスは次のようになります。どの行からどの行へ、どの列からどの列へ。 . を選択し、結合するボタンをクリックします。学校を出たときはJSのことを少しだけ知っていたけど、全然できなかった!考えてみれば、この問題は基礎力がしっかりしているかを試される問題なのです!興味があれば、自分でやってみて、できるかどうか試してみることができます。質問のスクリーンショット: 今、この質問をしています。簡単そうに見えますが、それでも時間がかかりました。もしかしたら私の考えが間違っているのでしょうか?肝心なのはjsを使ってhtmlを操作することですが、行の追加、行の削除、列の追加、列の削除を実装しましたが、主にテーブルがめちゃくちゃになってしまうため、完全には実現できません。この質問を投稿してください。興味のある同僚は、時間があるときにこの質問を勉強して、達成できるかどうかを確認してください。主な問題はセルの結合です。セルの結合の問題を解決するのにも役立ちます。 私が自分で実装したコードの一部: HTML 部分は次のように記述します
< ;td align=" center"colspan="2"> < ;/td> 行 から row <入力タイプから="text " name="beginCol" id="beginCol" value=""/> 列を入力します。 td> appendChild を使用してテーブルを生成します
コードをコピー 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; }
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
2025-02-26 03:58:14
2025-02-26 03:38:10
2025-02-26 03:17:10
2025-02-26 02:49:09
2025-02-26 01:08:13
2025-02-26 00:46:10
2025-02-25 23:42:08
2025-02-25 22:50:13
2025-02-25 21:54:11
2025-02-25 20:45:11
最新の問題
2025-03-18 15:17:30
2025-03-18 15:16:33
2025-03-18 15:14:33
2025-03-18 15:12:30
2025-03-18 15:11:34