アプリ版：「スタンプのみでお礼する」機能のリリースについて

ゲームの集計表のHTMLを教えてください

解決済

  • 質問者：owabi
  • 質問日時：
  • 回答数：5件

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

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

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

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

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

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

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

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

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

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

      補足日時：2015/12/03 01:14
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.4ベストアンサー

  • 回答者： yambejp
  • 回答日時：

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


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

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

No.5

  • 回答者： Ogre7077
  • 回答日時：

少々アレンジを入れて



<!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

No.3

  • 回答者： fujillin
  • 回答日時：

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



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

No.2

  • 回答者： yambejp
  • 回答日時：

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


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

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

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

通報する
お礼日時：2015/12/02 13:11

No.1

  • 回答者： keronjin
  • 回答日時：

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

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

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

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

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

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報