![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
JavaScriptで出力したテーブルを変更ボタンを押した時にテーブルの
データと行数を変更したいのですが、行数の変更がどうしても出来ません。
以下の「予定」のテーブルのように変更前が5行のテーブルを変更後が3行の
テーブルに変更するにはどのようにすればよろしいでしょうか。
ご教授お願いいたします。
----------
| 変更前 |
----------
|1:aaa |
----------
|2:bbb |
----------
|3:ccc |
----------
|4:ddd |
----------
|5:eee |
----------
----------
| 変更後 |
----------
|6:fff |
----------
|7:ggg |
----------
|8:hhh |
----------
|4:ddd |
----------
|5:eee |
----------
----------
| 予定 |
----------
|6:fff |
----------
|7:ggg |
----------
|8:hhh |
----------
----------------------------------------
以下サンプルソース
----------------------------------------
<html>
<head>
<title>サンプル</title>
</head>
<body>
<script type="text/javascript">
<!--
var data_1 = new Array();
data_1[0] = "1:aaa";
data_1[1] = "2:bbb";
data_1[2] = "3:ccc";
data_1[3] = "4:ddd";
data_1[4] = "5:eee";
var data_2 = new Array();
data_2[0] = "6:fff";
data_2[1] = "7:ggg";
data_2[2] = "8:hhh";
function change_table()
{
var i;
for(i = 0;i < data_2.length;i++){
document.getElementById("data"+i).innerHTML = data_2[i];
}
}
function create_table()
{
var i;
for(i = 0;i < data_1.length;i++){
document.write("<tr><td id=\"data"+i+"\"></td></tr>");
document.getElementById("data"+i).innerHTML = data_1[i];
}
}
// -->
</script>
<form>
<input type="button" value="テーブル変更" onClick="change_table()">
</form>
<table border=4>
<script type="text/javascript">
<!--
create_table();
// -->
</script>
</table>
</body>
</html>
No.1ベストアンサー
- 回答日時:
<html>
<head>
<title>サンプル</title>
</head>
<body>
<script type="text/javascript">
<!--
var data_1 = new Array();
data_1[0] = "1:aaa";
data_1[1] = "2:bbb";
data_1[2] = "3:ccc";
data_1[3] = "4:ddd";
data_1[4] = "5:eee";
var data_2 = new Array();
data_2[0] = "6:fff";
data_2[1] = "7:ggg";
data_2[2] = "8:hhh";
data_2[3] = "";//ここに注目して下さい
data_2[4] = "";//ここに注目して下さい
function change_table()
{
var i;
for(i = 0;i < data_2.length;i++){
document.getElementById("data"+i).innerHTML = data_2[i];
}
}
function create_table()
{
var i;
for(i = 0;i < data_1.length;i++){
document.write("<tr><td id=\"data"+i+"\"></td></tr>");
document.getElementById("data"+i).innerHTML = data_1[i];
}
}
// -->
</script>
<form>
<input type="button" value="テーブル変更" onClick="change_table()">
</form>
<table border=4>
<script type="text/javascript">
<!--
create_table();
// -->
</script>
</table>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript javascriptでテーブルに追加した項目のid追加してローカルストレージを操作したい 5 2023/01/01 15:52
- JavaScript 【jquery】EasyUIのSubGridにMySQLのテーブルデータを表示&編集にしたい 5 2022/05/02 13:10
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- PHP PHPでCookieを使った訪問回数について 1 2023/05/28 14:10
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
このQ&Aを見た人はこんなQ&Aも見ています
-
「どうして捨てられないの?」前妻の物を捨てられない男性の心理って?
前妻の物を捨てられない理由に加え、捨てるための手段はあるのかを専門家に聞いてみた!
-
画面幅に合わせてテーブルのカラム数を変えたい
HTML・CSS
-
テーブルの位置を細かく指定したい。
HTML・CSS
-
htmlでテーブル内にテキストボックスを作りたいのですが・・・
HTML・CSS
-
-
4
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
5
ボタンをセル内一杯に表示させる方法はありませんか?
HTML・CSS
-
6
HTMLの値の渡し方について質問です。 HTMLで値を今の画面から次の画面に渡すにはどういう文を使う
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javascriptで画像をテーブルに...
-
javascriptでスロットマシン
-
return trueとreturn falseの用...
-
プルダウン選択を変更すると、...
-
slickのレスポンシブ > center...
-
FormのonsubmitでJavaスクリプ...
-
onchangeイベントを強制的に発...
-
submitがおされた同時に JavaSc...
-
select要素のvalueを配列で取得...
-
Selectボックスの幅を自動で広...
-
HTMLファイル同士での値渡し
-
ラジオボタンの値でリンク先を...
-
ラジオボタンとプルダウンを連...
-
Selectの中身をfor文で入れる
-
JQuery selectが反映されない
-
onClickとsubmitの処理順序
-
確認ページからフォームページ...
-
javascriptで入力禁止文字をチ...
-
プルダウンで選択すると、DBの...
-
dijit.form.ComboBoxについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
selectのonChangeが動作しません
-
テーブルの行数を可変長にした...
-
画面表示とともに、テーブルの...
-
javascriptで<table>背景色の取得
-
javascriptでクリックするごと...
-
テキストエリアに入力した改行...
-
JQueryでテーブルの行を追加し...
-
javascriptで画像をテーブルに...
-
クリックごとに文字色が交互に...
-
カレンダーに印を付けたい
-
任意に文字数指定のできる原稿...
-
idの振り直しについて
-
tbody要素のinnerHTMLが書き換...
-
複数画像のロールオーバー
-
指定のテキストをクリックする...
-
マウスが重なったら画像の上に...
-
jQueryでの親の親の隣の子供の...
-
JavaScript 保守性の高めたい 2
-
Javascriptでの開閉リストの質問
おすすめ情報