html javascript について

kintone カスタマイズ
1

プラグインの作成でhtml javascirpt の作成をしています。

設定画面でテーブルの中にセレクトボックスを配置、選択させて稼働をさせようとしているのですが一行目しか値が入らない状態です。どのように修正したらよいか詰まってしまったので回答をいただけると幸いです。

javascript

var config = {};

(function(PLUGIN_ID) {

  "use strict";

  var table = document.getElementById("table");

    let config = kintone.plugin.app.getConfig(PLUGIN_ID);

    console.log(Object.keys(config).length)

    for(let i = 1; i < Object.keys(config).length / 2; i++){

      var key = config['key' + i + 'name'];

      var code = config['key' + i + 'code'];

      let tr = document.createElement('tr');

    //   let datetd = document.createElement('td');

  //↑上記で必要な要素（tr,td,input）を用意          

//下記、createSelect関数に、配列、tr、tblを渡す

  createSelect(key,tr,table);

  createSelect(code,tr,table);

  //caldel(tr,table);

  table.appendChild(tr);

  console.log(table)

    }

    // function caldel(tr,table){

    //     let delbutton = document.createElement('input');

    //     let td = document.createElement('td');  

    //     delbutton.setAttribute('type','button');

    //     delbutton.id = delbutton;

    //     delbutton. = '削除ボタン'

    //     delbutton.onclick = delbuttonf(this)

    //     td.appendChild(delbutton);        //tdに追加

    //     tr.appendChild(td);

    //     function delbuttonf(obj) {

    //         var tableElem = document.getElementById('table');

    //         // tbody要素にある最後の行（tr要素）を削除

    //         tableElem.tBodies[0].deleteRow(-1);

    //       }

    // }

   

    function createSelect(arr,tr,tbl){

        let dateinp = document.createElement('input');

        let td = document.createElement('td');  

        dateinp.setAttribute('type','text');//inputを日付形式に

        dateinp.value = arr;

        td.appendChild(dateinp);        //tdに追加

        tr.appendChild(td);

   

    }

//   let config = kintone.plugin.app.getConfig(PLUGIN_ID);

//       console.log(config)

//     // ページ読み込み時に実行したい処理

    //  let table = document.getElementById('table');

     //let table = getElementById("table")

//     for(let i = 1; i < Object.keys(config).length; i++){

//       var key = config['key' + i + 'name'];

//       var code = config['key' + i + 'code'];

//       console.log(table)

//       table.rows[i].cells[0].innerText = key;

//       table.rows[i].cells[1].innerText = code;

//     }

// console.log(table.children)

//     for(var i = 0; i < table.children[0].children.length; i++){

        //tbl.children[0]はthead tbl.children[1]はtbody

        // var row = table.children[0].childNodes[1];//.children[1]//.children; //i番目のtrを取得

        // console.log(row);

        // console.log(row.cells[0].getElementsByTagName("input")[0].value); //各行のコードのコントロールの値を出力

        // console.log(row.cells[1].getElementsByTagName("input")[0].value); //各行の名称のコントロールの値を出力

    //   }




   document.getElementById('save-button').addEventListener('click', function(){

     

     var tbldeta = getTableData();

     console.log(tbldeta);

     config = {};

     for(let i = 0; i < tbldeta.length; i++){

      console.log(tbldeta[i][0])

      console.log(tbldeta[i][1])

      config['key' + i + 'name'] = tbldeta[i][0]

      config['key' + i + 'code'] = tbldeta[i][1]

     }

    kintone.plugin.app.setConfig(config);

     function getTableData(){

    // 抽出したデータを格納する配列

    let data = [];

    // idでhtmlからtableの要素を取得し、trタグのNodeListを取得

    let table = document.getElementById('table');

    let tbl_tr = table.querySelectorAll('tr');

    //テーブルの1行(trタグ)毎に処理

    tbl_tr.forEach(function(tr){

        //tdタグのNodeListを取得

        let cells = tr.querySelectorAll('td');

        //テーブルのヘッダー部分は飛ばす

        if (cells.length!=0){

            // テーブルの1行(trタグ)のデータを格納する配列

            let d =[];

            //セル(tdタグ)毎に処理

            cells.forEach(function(td){

                //セルがinputタグだった場合

                if(td.innerHTML.indexOf('input') != -1) {

                    d.push(td.firstElementChild.value);

                }

                //セルがtextだった場合

                else if(td.textContent!=""){

                 

                  console.log(td)

                    d.push(td.textContent);

                }

                //セルが空白だった場合

                else{

                    d.push("");

                }

            });

            data.push(d);

        }

    });

    return data

}

 //    var table = document.getElementById("table");

 //    console.log(table.rows.length);

 // console.log(table.rows[1].name1.value);

  });

})(kintone.$PLUGIN_ID);

html

<input type="button" value="行を追加" id="coladd" onclick="coladd()">

<input type="button" value="行を削除" id="delcal" onclick="delcal()">

       

<table id="table" border="1">

    <tr>

        <td>

          検索名称

        </td>

        <td>

          検索フィールドコード

      </td>

    </tr>

</table>

<button id="save-button" onclick = 'clickbutton()'>save</button>

<script>

function clickbutton(){

const color1 = document.form1.name;

// 値(数値)を取得

const num = color1.selectedIndex;

//const num = document.form1.color1.selectedIndex;

// 値(数値)から値(value値)を取得

const str = color1.options[num].value;

//const str = document.form1.color1.options[num].value;

console.log(str)

debugger;

}

  window.onload = function(){

   

    var table = document.getElementById("table");

      // 行を行末に追加

      var row = table.insertRow(-1);

      //td分追加

      var cell1 = row.insertCell(-1);

      var cell2 = row.insertCell(-1);

      cell1.innerHTML = '<form name = "form1"><select name="name" id="name"></select></form> ';

      cell2.innerHTML = '<form name = "form2"><select name="code-name" id="code-name"></select></form>';

      option();

  }

      function option(){

        var body = {

          'app': kintone.app.getId()

        };

        kintone.api(kintone.api.url('/k/v1/form.json', true), 'GET', body, function(resp) {

          // success

          console.log(resp);

          console.log(resp.properties[0].type)

          for(let i = 0; i < resp.properties.length; i++){

                          //select要素を取得する

            const selectFoodName = document.getElementById('code-name');

            console.log(document.forms['form1'].getElementsByTagName('name')[0])

            console.log(document.forms['form1'].getElementsByTagName('name')[1])

            console.log(selectFoodName[2])

            const color = document.form1.name;

            console.log(color.selectedIndex)

            const selectName = document.getElementById('name');

            console.log(selectName[2])

            //option要素を新しく作る

            const option1 = document.createElement('option');

            const option2 = document.createElement('option');

            //option要素にvalueと表示名を設定

            option1.textContent = resp.properties[i].code;

            option2.textContent = resp.properties[i].label;

            //select要素にoption要素を追加する

            selectFoodName.appendChild(option1);

            selectName.appendChild(option2);

          }

        }, function(error) {

          // error

          console.log(error);

        });

       

       

      }

  function coladd() {

      var table = document.getElementById("table");

      // 行を行末に追加

      var row = table.insertRow(-1);

      //td分追加

      var cell1 = row.insertCell(-1);

      var cell2 = row.insertCell(-1);

      // セルの内容入力

      cell1.innerHTML = '<form name = "form1"><select name="name" id="name"></select></form> ';

      cell2.innerHTML = '<form name = "form2"><select name="code-name" id="code-name"></select></form>';

      option();

  }




  function coldel(obj) {

    // 削除ボタンを押下された行を取得

    tr = obj.parentNode.parentNode;

    // trのインデックスを取得して行を削除する

    tr.parentNode.deleteRow(tr.sectionRowIndex);

  }

  function delcal() {

    console.log('AAA')

    var tableElem = document.getElementById('table');

    // tbody要素にある最後の行（tr要素）を削除

    tableElem.deleteRow(-1);

  }




  // document.getElementById('save-button').addEventListener('click', function(){

  //   var table = document.getElementById("table");

  //   console.log(table.rows.length);

  // });




</script>
2

ishikawayuitoさん

こんにちは。

 

coladd()内で行は追加されますが、option()内では毎回1行目に対して選択肢optionを設定するような動きになっています。

 

selectが生成された際に、同じid（「name」や「code-name」）が付いているので、これ重複しないようにすると良いと思います。

coladd()内のselect生成時にidを重複しない一意な値として

そのidをoptionの引数で渡すなどして、document.getElementById(‘引数で渡したid’)で

「selectFoodName」や「selectName」を定義するというのはいかがでしょうか。

 

cell1.innerHTML = '<form name = "form1"><select name="name" id="ここを一意な値"></select></form> ';
cell2.innerHTML = '<form name = "form2"><select name="code-name" id="ここを一意な値"></select></form>';

option(上行のselectのid, 下行のselectのid);
// 行番号が取れるのであれば、行番号をidや引数にするという方法もあります。