今javascriptを勉強しています。
ここに質問の内容を詳しく書いてください。
現在、ボタンを押さずにjavascriptのfor-loopを使って、テーブルの行と、列を追加することをしていますが、なかなかうまくいきません。色々模索した結果、このようになったのですが、なんだか、もう少し簡単にコードがかけるような気がしています。もしどなたかより簡単にかける方法を知っている人がいたら教えて頂けたらと思います。
該当のソースコード
ソースコード
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>Individuell uppgift 2 - Tabellhantering och beräkning</title> <link rel="stylesheet" type="text/css" href="style/bootstrap.min.css"/> <link rel="stylesheet" type="text/css" href="style/style.css"/> </head> <body> <div class="container"> <div id="header" class="text-center px-3 py-3 pt-md-5 pb-md-4 mx-auto"> <h1 class="display-4">Hemelektronik</h1> <p class="lead">Se våra utmärkta priser på hemelektronik i tabellen nedan</p> </div> <div id ="content"> <table id="pricetable" class="table table-hover"> <thead class="thead-dark"> <tr> <th>Artikelnr</th> <th>Produkttyp</th> <th>Varumärke</th> <th>Pris</th> <th>Antal</th> </tr> </thead> <tbody> <tr> <td>23456789</td> <td>Telefon</td> <td>Apple</td> <td>6500</td> <td><input type="text" size ="3" value ="1"/></td> </tr> <tr> <td>22256289</td> <td>Telefon</td> <td>Samsung</td> <td>6200</td> <td><input type="text" size ="3" value ="1"/></td> </tr> <tr> <td>24444343</td> <td>Telefon</td> <td>Huawei</td> <td>4200</td> <td><input type="text" size ="3" value ="1"/></td> </tr> <tr> <td>19856639</td> <td>Surfplatta</td> <td>Apple</td> <td>4000</td> <td><input type="text" size ="3" value ="1"/></td> </tr> <tr> <td>39856639</td> <td>Surfplatta</td> <td>Samsung</td> <td>2800</td> <td><input type="text" size ="3" value ="1"/></td> </tr> <tr> <td>12349862</td> <td>Surfplatta</td> <td>Huawei</td> <td>3500</td> <td><input type="text" size ="3" value ="1"/></td> </tr> </tbody> </table> </div> </div> <script type="text/javascript" charset="utf-8" src="scripts/calculate.js"></script> </body> </html>
ソースコード
function
1 /*テーブルヘッダー*/ 2 var tableHeadRow = document.querySelector("#pricetable thead tr"); 3 4 var nyTh = document.createElement("th"); 5 nyTh.innerHTML = "合計"; 6 tableHeadRow.appendChild(nyTh); 7 8 /*行の追加*/ 9 var tableBody = document.querySelector("#pricetable tbody"); 10 var tablerader = tableBody.querySelectorAll("tr"); 11 12 for (var i = 0; i < tablerader.length; i++) { 13 var nyCell = document.createElement("td"); 14 var node = document.createTextNode("hej"); 15 tablerader[i].appendChild(nyCell); 16 } 17 18 /*行の追加*/ 19 var tableBody = document.querySelector("#pricetable tbody"); 20 var tablerader = tableBody.querySelectorAll("tr"); 21 22 for (var i = 0; i < tablerader.length; i++) { 23 var nyCell = document.createElement("td"); 24 var node = document.createTextNode("hej"); 25 tablerader[i].appendChild(nyCell); 26 }
試したこと
#pricetableのIDを外して、もっと簡単にテーブルを読み込んでみようと試みたのですが、このIDを外すと結局行が表示されなくなってしまいました。他に方法があれば教えて頂きたいと思います。
補足情報(FW/ツールのバージョンなど)
横に五行縦に6列のテーブルに、ボタンを押さずに、全行に1つずつセルを追加し、また一番下に1つ列を追加しようとしています。また、その後、ボタンを作って、全ての金額をセルに表示、もし商品の数が増えればその合計の金額をセルに表示します。最後のは全ての商品の合計金額を一番下の列に表示するテーブルを作っています。
回答2件
あなたの回答
tips
プレビュー