# Javascriptでテーブルの値を変更したい

**URL:** <https://community.cybozu.dev/t/topic/503>\
**Category:** kintone 開発相談\
**Created:** [2017 年 8 月 23 日午前 5:03 UTC](https://community.cybozu.dev/t/topic/503 "2017-08-23T05:03:09Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account1862](https://avatars.discourse-cdn.com/v4/letter/l/58956e/32.png) [@Legacy\_Account1862](https://community.cybozu.dev/u/Legacy_Account1862)\
**Post date:** [2017 年 8 月 23 日午前 5:03 UTC](https://community.cybozu.dev/t/topic/503/1 "2017-08-23T05:03:09Z")

</div>

サンプルを見ながら、スマホ版のタイムカードを作成を考えています。

タイマー表示させたいのですが、思うように値がセットできません。

テーブルの中の値の参照方法が悪いと思うのですが、どのように参照すればよろしいでしょうか。

ご教授ください。

&nbsp;

以下サンプルソースです。

&nbsp;(function() {  
“use strict”;

// 打刻ボタン表示  
kintone.events.on(‘mobile.app.record.index.show’, function(event) {  
var Shukkincss = ‘height:120px;width:50%;font-size:35pt;border-radius:10px;color:red; background: -moz-linear-gradient(bottom,yellow, khaki 50%,yellow);background: -webkit-gradient(linear, left bottom, left top, from(yellow), color-stop(0.5, khaki), to(yellow));’;  
var Taikincss = ‘height:120px;width:50%;font-size:35pt;border-radius:10px;color:white;background: -moz-linear-gradient(bottom,royalblue, mediumblue 50%,royalblue);background: -webkit-gradient(linear, left bottom, left top, from(blue), color-stop(0.5, mediumblue), to(blue));’;

var Divcss = ‘margin:0; padding:0; list-style:none;height:50px;padding:10px;background:#44810F;border-bottom:1px solid #fff;color:#fff;’;

var Yearcss = ‘width:150px; text-align:center; virtical-align:bottom;’;  
var Datecss = ‘width:150px; text-align:center;’;  
var Timecss = ‘font-size:200%;’;

// divタグ要素を作成  
var myDisplayDiv = document.createElement(‘div’);  
myDisplayDiv.style = Divcss;

// tableタグ要素を作成  
var table = document.createElement(‘table’);  
table.id = ‘nametbl’;  
table.border = ‘0’;

// tbodyタグ要素作成し、tableタグ要素に追加  
var tbody = document.createElement(‘tbody’);  
table.appendChild(tbody);

// 1行目のTRタグ要素を作成しTBODYタグ要素に追加  
var tr1 = document.createElement(‘tr’);  
var td1\_1 = document.createElement(‘td’);  
var td1\_2 = document.createElement(‘td’);

td1\_1.style = Yearcss;  
td1\_1.id = ‘year’;  
td1\_1.innerHTML=‘2017’;

td1\_2.style = Timecss;  
td1\_2.id = ‘time’;  
td1\_2.rowSpan = ‘2’;  
td1\_2.innerHTML=‘16:45’;

tr1.appendChild(td1\_1);  
tr1.appendChild(td1\_2);  
tbody.appendChild(tr1);

// 2行目のTRタグ要素を作成しTBODYタグ要素に追加  
var tr2 = document.createElement(‘tr’);  
var td2\_1 = document.createElement(‘td’);

td2\_1.id = ‘date’;  
td2\_1.style = Datecss;  
td2\_1.innerHTML=‘08/22’;

tr2.appendChild(td2\_1);  
tbody.appendChild(tr2);

// tableタグ要素をBODYタグに追加  
kintone.mobile.app.getHeaderSpaceElement().appendChild(myDisplayDiv);

myDisplayDiv.appendChild(table);  
});

// サーバーの時間を取得する  
function getUTCDateByServer() {  
var r;  
return (r = new XMLHttpRequest)  
? (r.open (‘HEAD’, ‘#’, false), r.send (null), new Date (r.getResponseHeader (‘Date’))) : null;  
}

// 指定された文字の指定された長さのゼロサプレスを取得する  
function zero\_suppress(s, len){  
var str = ‘’;  
for (var i=0;i\<len ;i+=1) { str += ‘0’; }  
str += s;  
return str.substr(str.length - len, len);  
}

// 時計に表示する関数  
function set\_digitTime(){  
var dt = new Date(getUTCDateByServer());  
var yyyy, MM, dd, hh, mm, ss;  
var DAY = [‘SUN’,‘MON’,‘TUE’,‘WED’,‘THU’,‘FRI’,‘SAT’,]  
yyyy = dt.getUTCFullYear();  
MM = zero\_suppress(dt.getUTCMonth() + 1, 2);  
dd = zero\_suppress(dt.getUTCDate(), 2);  
hh = zero\_suppress(dt.getUTCHours() + 9, 2);  
mm = zero\_suppress(dt.getUTCMinutes(), 2);  
ss = zero\_suppress(dt.getUTCSeconds(), 2);

$(‘#year’)[0].innerHTML = yyyy; //←yearの参照方法がわかりません。  
$(‘#date’)[0].innerHTML = MM + ‘/’ + dd + ’ ’ + DAY[dt.getUTCDay()];  
$(‘#time’)[0].innerHTML = hh + ‘:’ + mm + ‘:’ + ss;  
}

// 1000ミリ秒ごとにset\_digitTime()を繰り返す  
set\_digitTime();  
setInterval(set\_digitTime, 1000);

})();

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1862](https://avatars.discourse-cdn.com/v4/letter/l/58956e/32.png) [@Legacy\_Account1862](https://community.cybozu.dev/u/Legacy_Account1862)\
**Post date:** [2017 年 8 月 24 日午前 8:56 UTC](https://community.cybozu.dev/t/topic/503/2 "2017-08-24T08:56:31Z")

</div>

自己解決しました。

最初に起動したときに実行される

// 1000ミリ秒ごとにset\_digitTime()を繰り返す  
set\_digitTime();

このタイミングでは、テーブルが作成されていないのでエラーになっていました。

下記を追加したところ、正常に動作しました。

onload = function(){  
set\_digitTime();  
};