Question

我已经对动态表行中的几个字段进行了循环，以便从localstorage中写入和检索数据。

它首先将数据保存在localstore上，将表重置为0行，并且为了检索数据，表行将被重新创建并在那里加载数据。问题是当文本框的类型为＆＃34; number＆＃34;时，该字段显示为空白。当我在数字字段的占位符值上尝试查看数据时，它会在各个字段上加载数据。

这仅发生在表的动态行中的循环字段中。固定行的数字输入可以正确加载。

我在循环中使用的ID正确并打印

document.getElementById('4-4-1').value = 2"

其中

4-4-1 = x-y-z
x = tableNumber
y = FieldNumber
z = RowNumber

但是当我再次在控制台上粘贴document.getElementById('4-4-1').value时，它什么也没有返回。（虽然场上出现了＆＃39; 2＆＃39;的占位符。）

我也尝试在控制台中使用相同的行更改值，它可以正常工作。

为什么它在循环期间没有处理数字字段？

在Chrome，Firefox上尝试过。针对Android 4.2网页视图。

商店循环

function saveRecordNow() {
var rec = {};
rec[0] = document.getElementById('data0').value
rec[1] = document.getElementById('data1').value
rec[2] = document.getElementById('otherdata').value
rec[3] = document.getElementById('foo').value
...
...
var tblSpaceQtr = document.getElementById('tblSpaceQtr');

rowCnt = tblSpaceQtr.getElementsByTagName("tr").length - 11;  
//there are 11 fixed rows on the table, and is not included on the count


//var page4Data = '';
for(x=1; x <= rowCnt; x++) {
  page4Data += document.getElementById("4-1-"+x).value + ', '+
    document.getElementById("4-2-"+x).value + ', '+
    document.getElementById("4-3-"+x).value + ', '+
    document.getElementById("4-4-"+x).value + ', '+
    document.getElementById("4-5-"+x).value + ', '+
    document.getElementById("4-6-"+x).value + ', '+
    document.getElementById("4-7-"+x).value + ', '+
    document.getElementById("4-8-"+x).value + ', '+
    document.getElementById("4-9-"+x).value + ', '+
    document.getElementById("4-10-"+x).value + ', '+
    document.getElementById("4-11-"+x).value + ', '+
    document.getElementById("4-12-"+x).value + ', '+
    document.getElementById("4-13-"+x).value + ', '+
    document.getElementById("4-14-"+x).value + ', '+
    document.getElementById("4-15-"+x).value + ', '+
    document.getElementById("4-16-"+x).value + ', '+
    document.getElementById("4-17-"+x).value + ', '+
    document.getElementById("4-18-"+x).value + ', '+
    document.getElementById("4-19-"+x).value + ', '+
    document.getElementById("4-20-"+x).value + ', '+
    document.getElementById("4-21-"+x).value + ', '+
    document.getElementById("4-22-"+x).value + ', '+
    document.getElementById("4-23-"+x).value + '||| ';
    //console.log("data from 4-1-"+x);
}
page4Data.substring(0, page4Data.length - 2); //remove end comma
//alert()
rec[681] = page4Data;

...
}

检索循环

function loadRecord(n) {

var getVar = JSON.parse(localStorage.getItem(n));
document.getElementById('id').value = n;
numCells = document.getElementById('nbcells');

document.getElementById('data0').value = getVar[0];
document.getElementById('data1').value = getVar[1];
document.getElementById('otherdata').value = getVar[2];
document.getElementById('foo').value = getVar[3];
document.getElementById('foo2').value = getVar[4];
document.getElementById('foo3').value = getVar[5];
...

initTable(numCells, numCells.value)
var pg4Data = [],
pg4RowData = [],
pg4Data = getVar[681].split('|||');
page4Data = getVar[681]
//getVar[681] from JSON.parse(localStore['source']);
//having a csv separated by '|||' per row

for(x=1; x < pg4Data.length; x++) {
    pg4RowData = pg4Data[x-1].split(',');
    document.getElementById("4-1-"+x).value = pg4RowData[0];    
    document.getElementById("4-2-"+x).value = pg4RowData[1];
    document.getElementById("4-3-"+x).value = pg4RowData[2];
    document.getElementById("4-4-"+x).value = pg4RowData[3];
    console.log("document.getElementById('4-4-"+x+"').value =" +pg4RowData[3]);
        document.getElementById("4-4-"+x).placeholder = pg4RowData[3];
    //document.getElementById("4-4-"+x).setAttribute('value', pg4RowData[3]);   
    //document.getElementById("4-5-"+x).value = pg4RowData[4];
    document.getElementById("4-5-"+x).value = pg4RowData[4];
        document.getElementById("4-5-"+x).placeholder = pg4RowData[4];
    document.getElementById("4-6-"+x).value = pg4RowData[5];
        document.getElementById("4-6-"+x).placeholder = pg4RowData[5];
    document.getElementById("4-7-"+x).value = pg4RowData[6];
        document.getElementById("4-7-"+x).placeholder = pg4RowData[6];
    document.getElementById("4-8-"+x).value = pg4RowData[7];
        document.getElementById("4-8-"+x).placeholder = pg4RowData[7];
    document.getElementById("4-9-"+x).value = pg4RowData[8];
        document.getElementById("4-9-"+x).placeholder = pg4RowData[8];
    document.getElementById("4-10-"+x).value = pg4RowData[9];
    document.getElementById("4-11-"+x).value = pg4RowData[10];
    document.getElementById("4-12-"+x).value = pg4RowData[11];
    document.getElementById("4-13-"+x).value = pg4RowData[12];
    document.getElementById("4-14-"+x).value = pg4RowData[13];
    document.getElementById("4-15-"+x).value = pg4RowData[14];
    document.getElementById("4-16-"+x).value = pg4RowData[15];
    document.getElementById("4-17-"+x).value = pg4RowData[16];
    document.getElementById("4-18-"+x).value = pg4RowData[17];
    document.getElementById("4-19-"+x).value = pg4RowData[18];
    document.getElementById("4-20-"+x).value = pg4RowData[19];
    document.getElementById("4-21-"+x).value = pg4RowData[20];
    document.getElementById("4-22-"+x).value = pg4RowData[21];
    document.getElementById("4-23-"+x).value = pg4RowData[22];
}
...
}

Answer 1

JavaScript 中元素的ID，类名和变量不能以数字开头！请在值前加上一个字符，然后再试一次。

for(x=1; x < pg4Data.length; x++) {
    pg4RowData = pg4Data[x-1].split(',');
    document.getElementById("s-4-1-"+x).value = pg4RowData[0];    
    document.getElementById("s-4-2-"+x).value = pg4RowData[1];
    document.getElementById("s-4-3-"+x).value = pg4RowData[2];
    document.getElementById("s-4-4-"+x).value = pg4RowData[3];

javascript循环不会写入数字输入

1 个答案: