フォーム上の実際のテキストフィールドに配列を束縛する

Question

私は仕事と支払いを表すいくつかの行を持つPDFフォームを持っています。

すべての行は配列である：

var Line = [{ Job: "function", Time: "hours", Wage: "pay" }]; 

function、hoursとpayは、フォームの各ライン上のテキストフィールドのセットの名前です。

Lineの要素のインデックスをフォームの特定のテキストフィールドに結び付けるにはどうすればよいですか？ （Like：Line[10] .Timeは、フォームのテキストフィールドの10行目のテキストフィールドhoursを参照します）

これを行うには巧妙な方法がありますか？

Answer 1

あなたが次に設定、属性を利用してオブジェクトの各プロパティの設定値は、オブジェクトの以前に設定された値に対応する要素に一致するようにセレクタ[attrName^=attrValye]で始まり、<input>又は<select>要素のセットを含む「行」の各親要素を反復することができ一致した要素に対するオブジェクトプロパティの値。

次に、Lineの配列のインデックスとobjectのプロパティを参照して、要素の値を設定できます。結果が期待される何

const form = document.getElementById("lines"); 
 
const fields = lines.querySelectorAll("fieldset") 
 
const Line = Array.from(fields 
 
      , function(field) { 
 
       let o = {Job: "function", Time: "hours", Wage: "pay"}; 
 
       for (let prop in o) 
 
        o[prop] = field.querySelector(`[name^="${o[prop]}"]`);         
 
       return o 
 
      }); 
 

 
Line[0].Job.value = "abc"; 
 
Line[1].Time.value = 123;

<form id="lines"> 
 
    <fieldset> 
 
    <input name="function[0]" type="text"> 
 
    <input name="hours[0]" type="number"> 
 
    <input name="pay[0]" type="number"> 
 
    </fieldset> 
 
    <fieldset> 
 
    <input name="function[1]" type="text"> 
 
    <input name="hours[1]" type="number"> 
 
    <input name="pay[1]" type="number"> 
 
    </fieldset> 
 
</form>