人気雑誌が読み放題♪

6名でゲームをしますがその集計表のHTMLを教えてください。

①横に仮名6名分、縦に番号1~15試合
②仮名を名前に変える
 欠席者もあるので2~5でも対応、仮名を削除すれば不参加。
③ゲームが終わると点数を入力する。
 ゲームは2人~6人で行う。

④横に確かめ算を表示(基本±0だが0にならない時にもある)
⑤点数を入力すると合計が表示される。
⑥ 2~15試合 ③~⑤をくりかえす。

⑥リセットボタンを押すとすべての点数がクリア(名前はクリアしない)

できたら偶数のラインに薄黄のバック。

「ゲームの集計表のHTMLを教えてください」の質問画像

質問者からの補足コメント

  • No.5さん 
    <meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
    で文字化け解消されました。

    こちらもテストさせてください。
    ただ縦に番号1~15試合ではないですね。

    何名でも何試合でも追加できて
    すばらしいです。

      補足日時:2015/12/03 01:14

このQ&Aに関連する最新のQ&A

A 回答 (5件)

とりあえず冗長な処理になってしまいましたが以下でいけるかと


htmlとスクリプト(js)とスタイルシート(css)を分けて3つのファイルにしてください

test.htm
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="test.css"></link>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<form id="f">
<table id="t">
<thead>
<tr>
<th></th>
<th><input type="text" value="YS"></th>
<th><input type="text" value="G"></th>
<th><input type="text" value="T"></th>
<th><input type="text" value="C"></th>
<th><input type="text" value="D"></th>
<th><input type="text" value="YB"></th>
<th class="checkcol">check</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col0">1</td>
<td><input type="text" class="col1"></td>
<td><input type="text" class="col2"></td>
<td><input type="text" class="col3"></td>
<td><input type="text" class="col4"></td>
<td><input type="text" class="col5"></td>
<td><input type="text" class="col6"></td>
<td class="checkcol"><input type="text" class="check"></td>
</tr>
</tfoot>
</tbody>
<tfoot>
<tr>
<td class="col0">sum</td>
<td><input type="text" class="col1"></td>
<td><input type="text" class="col2"></td>
<td><input type="text" class="col3"></td>
<td><input type="text" class="col4"></td>
<td><input type="text" class="col5"></td>
<td><input type="text" class="col6"></td>
<td class="checkcol"><input type="text" class="check"></td>
</tr>
</tfoot>
</table>
<input type="button" value="reset">
</form>
</body>
</html>

//test.css
table{border-collapse:collapse;}
th,td{border:1px solid #000000;}
th{background-Color:aqua;}
th input,td input{background-Color:transparent;}
th.checkcol,td.checkcol{border:0px solid;background-Color:inherit;}
tr.even td{background-Color:#ffffc0;}
td.col0{text-align:right;font-weight:bold;}
table input{width:4em;border:0px;}
th input{text-align:center;}
td input{text-align:right;}

//test.js
window.onload=function(){setTable();}
try{
document.addEventListener ('keyup',function(e){myfunc(e)},true);
document.addEventListener ('click',function(e){myfunc(e)},true);
}catch(e){
document.attachEvent('onkeyup',function(e){myfunc(e)});
document.attachEvent('onclick',function(e){myfunc(e)});
}
function myfunc(e){
var t = (e.srcElement || e.target);
if(e.type=="keyup" && t.nodeName=="INPUT" && t.type=="text" && t.form.id=="f"){
mycalc();
}
if(e.type=="click" && t.nodeName=="INPUT" && t.type=="button" && t.value=="reset"){
myreset();
}
}

function setTable(){
var maxrow=15;
var t=document.getElementById("t");
for(var i=0;i<maxrow -1;i++){
var r=t.getElementsByTagName("tbody")[0].getElementsByTagName("tr")[0];
var rr=r.cloneNode(true);
rr.getElementsByTagName("td")[0].innerHTML=i+2;
if(i%2==0){
rr.className="even";
}
r.parentNode.appendChild(rr);
}
}
function myreset(){
var t=document.getElementById("t");
var inp=t.getElementsByTagName("tbody")[0].getElementsByTagName("input");
for(var i=0;i<inp.length;i++){
inp[i].value="";
}
var inp=t.getElementsByTagName("tfoot")[0].getElementsByTagName("input");
for(var i=0;i<inp.length;i++){
inp[i].value="";
}
}
function mycalc(){
var t=document.getElementById("t");
var trs=t.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
var colsum=[0,0,0,0,0,0];
var colflg=[false,false,false,false,false,false];
for(var i=0;i<trs.length;i++){
var inp=trs[i].getElementsByTagName("input");
var flg=false;
var rowsum=0;
for(var j=0;j<6;j++){
if(inp[j].value!==""){
flg=true;
colsum[j]+=parseInt(inp[j].value);
colflg[j]=true;
rowsum+=parseInt(inp[j].value);
}
inp[6].value=flg?rowsum:"";
}
}
var inp=t.getElementsByTagName("tfoot")[0].getElementsByTagName("input");
var flg=false;
var rowsum=0;
for(var i=0;i<6;i++){
if(colflg[i]){
flg=true;
rowsum+=colsum[i];
inp[i].value=colsum[i];
}else{
inp[i].value="";
}
}
inp[6].value=flg?rowsum:"";
}
    • good
    • 0
この回答へのお礼

ありがとうございます。
本当にすごいです。
私のイメージ通りのものができております。

ホームページにアップしてテストしてから
使わせていただきます。

もちろん自己責任なのであなたとgooがダメと言ったら
使いませんしホームページから削除します。

お礼日時:2015/12/02 18:16

少々アレンジを入れて



<!DOCTYPE html><meta charset=utf-8><title>ゲームの集計表</title>
<style>
table.score { border-collapse:collapse; }
table.score tr>* { padding:0.2ex 0.5ex; }
table.score tr>*:nth-child(even),
table.score tr:nth-child(even)>td { background-color:#ffffdd; }
table.score tr:nth-child(even)>td:nth-child(even) { background-color:#ffffcc; }
table.score td.num { text-align:right; }
table.score input[type=number] { text-align:right; width:4em; background-color:inherit; border:0;}
</style>
<script>window.addEventListener('DOMContentLoaded', function(){_=0;
_ ; var W = window, D = W.document, NC = {className:'num'};
_ ; var A = function(a,i){return Array.prototype.slice.call(a,i?i:0)};
_ ; var R = function(d,s){for(var i in s)d[i]=s[i]; return d};
_ ; var E = function(n,_){var e=(typeof n=='string')?D.createElement(n):n; A(arguments,1).forEach(appendVariousChild.bind(null,e)); return e};
_ ; var Q = function(p,s){return (p?p:D).querySelector(s)};
_ ; var QQ = function(p,s){return A((p?p:D).querySelectorAll(s))};
_ ; var C = function(p,s){var e=p; do { e=e.parentNode; } while (e && e.tagName!=s.toUpperCase()); return e};
_ ; var N = function(n){return (n===0?'':n<0?'':'+') + n.toPrecision(5).replace(/\.?0+$/,'')};
_ ; function appendVariousChild(e,x){
_ , _ ; (x instanceof HTMLElement)? e.appendChild(x): (x instanceof Array)? x.forEach(function(p){appendVariousChild(e,p)}): (typeof x == 'object')? R(e,x): e.appendChild(D.createTextNode(x));
_ ; };
_ ; function makeDataRow(n, members) {
_ , _ ; var toi = function(e,i){return E('td', NC, E('input', {type:'number', name:'s'+i, value:''}))};
_ , _ ; return E('tr', E('td', NC, n), members.map(toi), E('td', NC, E('output', {name:'z'}, 0)));
_ ; }
_ ; function makeSumRow(members) {
_ , _ ; var toi = function(e,i){return E('td', NC, {title:e}, E('output', {name:'s'+i}, 0))};
_ , _ ; return E('tr', E('td', '合計'), members.map(toi), E('td', NC, E('output', {name:'z'}, 0)));
_ ; }
_ ; function checkCell(ie) {
_ , _ ; var tab = C(ie, 'table'), tr = C(ie, 'tr'), eq = function(e){return e.name==ie.name}, sum = function(p,e){var n=parseFloat(e.value);return isNaN(n)?p:n+p};
_ , _ ; Q(tr, 'output[name=z]').value = N(QQ(tr, 'input[name^=s]').reduce(sum, 0));
_ , _ ; (QQ(tab, 'tfoot output[name^=s]').filter(eq))[0].value = N(QQ(tab, 'tbody input[name^=s]').filter(eq).reduce(sum, 0));
_ , _ ; Q(tab, 'tfoot output[name=z]').value = N(QQ(tab, 'tfoot output[name^=s]').reduce(sum, 0));
_ ; }
_ ; function createBoard(members){
_ , _ ; if (members.length < 2) return;
_ , _ ; var tab = E('table', {border:'border', className:'score'}, E('caption', new Date().toLocaleString()));
_ , _ ; E(tab, E('thead', E('tr', E('th', '#'), members.map(function(e){return E('th',e)}), E('th','check'))));
_ , _ ; E(tab, E('tbody', makeDataRow(1, members)), E('tfoot', makeSumRow(members)));
_ , _ ; tab.dataset.members = members.join(' ');
_ , _ ; var parent = Q(D.body, '#boards');
_ , _ ; parent.insertBefore(E('form', {name:'p'}, tab, E('button',{type:'submit', name:'a'}, '行追加')), parent.firstChild);
_ ; }
_ ; function addBoardLine(form) {
_ , _ ; var tab = Q(form, 'table'), members = tab.dataset.members.split(/ /), bod = tab.tBodies[0];
_ , _ ; E(bod, makeDataRow(bod.rows.length + 1, members) );
_ ; }
_ ; W.addEventListener('submit', function(ev){
_ , _ ; var form = ev.target;
_ , _ ; if (form.name == 'c') ev.preventDefault(), createBoard(ev.target.elements['m'].value.split(/\s+/).filter(function(e){return !!e}));
_ , _ ; if (form.name == 'p') ev.preventDefault(), addBoardLine(form);
_ ; }, false);
_ ; W.addEventListener('change', function(ev){
_ , _ ; var t = ev.target; if (t.tagName != 'INPUT') return;
_ , _ ; if (/^s/.test(t.name)) ev.preventDefault(), checkCell(t);
_ ; }, false);
}, false)</script>
<h1>ゲームの集計表</h1>
<form name=c><input type=text name=m size=40 value="豊臣 早見 織田 明智 徳川"><button type=submit>新規作成</button></form>
<article id=boards></article>
    • good
    • 0
この回答へのお礼

ありがとうございます。
文字化けをします。
私に問題があるかもしれません。

お礼日時:2015/12/02 18:18

エクセルでも良いけれど、ウェブ環境上で実現したいということでしょうか?



ウェブアプリのスプレッドシート等を利用すれば、ブラウザ上で表示・操作が可能ですし、スマホなどからでもアクセスできます。
いくつかあるようですが、例えば、
 https://apps.google.com/intx/ja/products/sheets/
    • good
    • 0

なにがわかって、なにがわからないか切り分けてください


なにがなんだか全てわからないなら#1さんもお勧めしている
エクセル(もしくは表計算ソフト)でやる方がよいでしょう。

(前回の質問をみる限り、ソースを修正するスキルがとぼしいため
仕様を変更するたびに一言一句提示しないといけないようなので)
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
上の表はエクセルで作って画像を貼り付けたものです。
旅行でエクセルが使えない状況でホームページで
なんとかしようと考えましたが
あなたでも作れないものでしたら仕方がないです。

お礼日時:2015/12/02 13:11

なぜHTMLなのでしょうか?。

エクセルなら簡単なのに。
開発費と時間をかければHTMLとjavascriptで作れますが、操作性が悪いのでおすすめしません。

もしこの辺が理解できればあなたにも作れるかもしれません。
> http://javascript123.seesaa.net/article/38389364 …

さらに縦軸の計算をするには配列や変数を深く理解する必要があるでしょう。
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QHTMLでテーブルを横に並べる方法

HTMLでホームページを作っています。
テーブルを横に二つ並べたいのですが、二つ目のテーブルはどうしても最初のテーブルの下の段になってしまいます。どうしたら横に並べることができますか?
教えていただければ幸いです。
よろしくお願いします。

Aベストアンサー

2列のテーブルを作ったらいかがでしょうか?
<table>
<tr>
<td>1つめのテーブルに入れる内容</td>
<td>2つめのテーブルに入れる内容</td>
</tr>
</table>

それぞれのテーブルをそのまま使いたいならば、
↑のテーブルのセルの中に、それぞれ入れれば2つ並びます。
<table>
<tr>
<td><table>←1つめのテーブル→</table></td>
<td><table>←2つめのテーブル→</table></td>
</tr>
</table>

Qパーセンテージの出し方

パーセンテージの出し方をおしえてください

Aベストアンサー

主人公÷母体×100


人気Q&Aランキング

おすすめ情報