javascriptでHTMLから作成したテーブルを別のhtmlに渡す

編集：問題が解決しました！ @ Thennarasanと@SiamakFerdosへの謝辞、あなたは深い感謝をしています！javascriptでHTMLから作成したテーブルを別のhtmlに渡す

ヒント：あなたはあなたが意図した値を取得する場合、それをチェックするために

console.log(your intended value)

を使ってみて確認されていません！

私はプロジェクトに取り組んでおり、あるhtmlから別のhtmlにテーブルを渡す必要があります。

全体のプロセス：

私は、乗算テーブルを生成するための入力として、ユーザからの数を受け入れるようにhtmlファイルを作成したいです。
乗算表を生成する関数を持つ外部のjavascriptファイルを作成します。
Javascript関数には、操作を実行するための配列変数とループが含まれている必要があります。
アラート方式を使用して適切なユーザーメッセージを使用します。
ユーザーがを呼び出すと関数が呼び出されます。ボタンを生成し、別のhtmlページに結果を転送します。

次は私がこれまで持っているものです。

//This is the Calculation.js 
 

 
function DisplayTable() { 
 
    var baseNumber = parseInt(document.getElementById("baseNumber").value); 
 
    var countMult = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 
 

 

 
    var createMultTable = "<table border='1'>" 
 
    document.write(createMultTable); 
 

 
    //This will create the table 
 
    //First column is user input, second column is multplier from 1 to 10, third column is results. 
 
    for (var row = 0; row < 10; row++) { 
 
    document.write('<tr>' + '</tr>'); 
 
    document.write('<td>' + baseNumber + '</td>' + '<td>' + countMult[row] + '</td>' + '<td>' + baseNumber * countMult[row] + '</td>'); 
 
    } 
 
    createMultTable += "</table>"; 
 
    document.write(createMultTable); 
 
} 
 

 
document.getElementById("newTable").innerHTML = createMultTable;

<!DOCTYPE html> 
 
<html> 
 
<!-- This is the Input.html, it gets a table from Calculation.js and pass it to TableGetter.html --> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 
    <title>Multiplication Table</title> 
 
    <link rel="stylesheet" href="Style.css" /> 
 
    <script src="modernizr.custom.05819.js"></script> 
 
    <script type="text/javascript" src="Calculation.js"></script> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    Multiplication Table 
 
    </header> 
 

 
    
 
    <article> 
 
    <h2>Multiplication Table</h2> 
 
    <form method="link" id="newTable" action="TableGetter.html"> 
 
     Enter a number: 
 
     <input type="text" name="numInput" id="baseNumber" placeholder="Please enter an integer!"> 
 
     <br> 
 
     <!-- <input id="multTable" type="submit" value="Submit" onclick="return DisplayTable();"> --> 
 
     <button type="button" name="button" onclick="DisplayTable();">Generate Table</button> 
 
    </form> 
 
    </article> 
 
</body> 
 

 
</html>

私はTableGetter.htmlに結果を転送する方法を考え出すに苦労しています。私はがInput.html

深い感謝の気持ちで表に生成ボタンをクリックしたときに、私はTableGetter.htmlを書くだけでなく、TableGetter.htmlにテーブルを渡すには助けが必要！ TableGetter.htmlで

出典

2017-02-04 Psycho Li

メソッド 'DisplayTable（）;'では、sessionstorageまたはlocalstorageにデータを設定し、項目をストレージから取得してTableGetter.htmlに表示します。 – Thennarasan

@Thennarasan私は 'form'で間違いを犯したと思うが、テーブルを表示するが、TableGetter.html –

にリダイレクトせず、@ zer00neによって投稿されたサンプルを使ってlocalstorageを使って通知される。 2オプション1.ボタンをリンクに変更し、目的のページに移動し、そのページでlocalstorageまたは2のデータを表示します。2. window.location.hrefを使用して、ユーザーを取得してデータを表示する場所を指定します。 – Thennarasan

は、正確にペーストしてチェックをコピーしてください。

calculation.js

function DisplayTable() { 
var baseNumber = parseInt(document.getElementById("baseNumber").value); 
var countMult = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 
var createMultTable = "<table border='1'>" 
document.write(createMultTable); 
//This will create the table 
//First column is user input, second column is multplier from 1 to 10, third column is results. 
for (var row = 0; row < 10; row++) {  
    createMultTable += '<tr><td>' + baseNumber + '</td>' + '<td>' + countMult[row] + '</td>' + '<td>' + baseNumber * countMult[row] + '</td></tr>';  

} 
createMultTable += "</table>"; 
localStorage.setItem("table_html", createMultTable);//ADD THIS LINE**** 

var url = 'TableGetter.html';//WRITE HERE YOUR RIGHT URL 
window.location.href = url; 
} 

if (window.location.pathname == "/C:/Users/Thennarasan/Desktop/js/TableGetter.html"){ 
var data = localStorage.getItem("table_html"); 
document.getElementById("newTable").innerHTML = data; 
}

注意あなたが持っているもののwindow.location.pathnameを変更。

input.html

<!DOCTYPE html> 
<html> 
<!-- This is the Input.html, it gets a table from Calculation.js and pass it to TableGetter.html --> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
<title>Multiplication Table</title> 
<link rel="stylesheet" href="Style.css" /> 
<script src="modernizr.custom.05819.js"></script> 
<script type="text/javascript" src="Calculation.js"></script> 
</head> 
<body> 
<header> 
Multiplication Table 
</header> 
<article> 
<h2>Multiplication Table</h2> 
<form method="link" id="newTable" action="TableGetter.html"> 
    Enter a number: 
    <input type="text" name="numInput" id="baseNumber" placeholder="Please enter an integer!"> 
    <br> 
    <!-- <input id="multTable" type="submit" value="Submit" onclick="return DisplayTable();"> --> 
    <button type="button" name="button" onclick="DisplayTable();">Generate Table</button> 
</form> 
</article> 
</body> 

</html>

TableGetter.html

<!DOCTYPE html> 
<html> 
<!-- This is the Input.html, it gets a table from Calculation.js and pass it to TableGetter.html --> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
<title>Multiplication Table</title> 
<link rel="stylesheet" href="Style.css" /> 
<script src="modernizr.custom.05819.js"></script> 
</head> 
<body> 
<header> 
Multiplication Table 
</header> 
<article> 
<h2>Multiplication Table</h2> 
<div id="newTable"></div> 
</article> 
<script type="text/javascript" src="Calculation.js"></script> 
</body> 
</html>

それを実行し、予想通り、それは動作します。

出典

2017-02-04 07:01:07 Thennarasan

はい！できます！そんなに私を助けてくれてありがとう！あなたと@Siamakの両方を正解として選択できますか？私はちょうどconsole.logを使用して、私のテーブルオブジェクトが不完全であることを発見しました。 'tr'と' td'はどこにでも散っています...ありがとう！ –

はい、はいの両方を選択できます。 – Thennarasan

：

<script> 
    (function() { 
     document.getElementById("newTable").innerHTML = localStorage.getItem("table_html"); 
    })(); 
</script>

そして、あなたをDisplayTable機能を変更します。私たちは、変更のカップルを作成する必要があり

function DisplayTable() { 
    var baseNumber = parseInt(document.getElementById("baseNumber").value); 
    var countMult = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 


    var createMultTable = "<table border='1'>" 
    document.write(createMultTable); 

    //This will create the table 
    //First column is user input, second column is multplier from 1 to 10, third column is results. 
    for (var row = 0; row < 10; row++) { 
    document.write('<tr>' + '</tr>'); 
    document.write('<td>' + baseNumber + '</td>' + '<td>' + countMult[row] + '</td>' + '<td>' + baseNumber * countMult[row] + '</td>'); 
    } 
    createMultTable += "</table>"; 

    localStorage.setItem("table_html", createMultTable);//ADD THIS LINE**** 

    var url = 'TableGetter.html';//WRITE HERE YOUR RIGHT URL 
    window.location.href = url; 
}

出典

2017-02-04 06:00:32

私は 'フォーム'に何か間違いを犯しましたか？私はテーブルを表示することができますが、URLはTableGetter.htmlにジャンプするはずですが、まだinput.htmlと言います。 –

あなたは新しいページにまったくリダイレクトしませんでした！私はあなたの関数にそれを追加します... –

input.htmlに関連する何かがありますか？あるいは、 'createMultTable'の何かが間違っていますか？ TableGetter.htmlに到達すると、何も表示されません。私はFirefox上でそれをテストし、プロセスが3つのレイヤーを持っていることを発見しました。最初にボタンをクリックすると、input.htmlのテーブルが1秒未満で表示され、そこに何も置かずにTableGetter.htmlにリダイレクトされます。 –

javascriptでHTMLから作成したテーブルを別のhtmlに渡す

答えて

関連する問題