使用JavaScript向數據庫日期填充文本框

Question

我有日期和金額數據。我想將這些數據填入正確的文本輸入。正如你在jsFiddle中看到的，有些月份有數據，有些月份沒有數據。

在我下面的示例中，我手動生成輸入，但我需要使用for -loop來創建它們，因爲我必須生成第一個日期月份到今天月份的文本框。

這樣做的簡單方法是什麼？

的jsfiddle：

// Date format dd MM yyyy 
 
var salaryData = [['date':'1.1.2015','amount':'100'],['date':'5.3.2015','amount':'105'],['date':'8.4.2015','amount':'1900'],['date':'15.6.2015','amount':'1005']]

<div> 
 
    <h1>Salary days</h1> 
 
    <ul> 
 
     <li> Amount/Date </li> 
 
     <li> 
 
      January 2015 <input type="text" name="janPrice" /><input type="text" name="date" /> 
 
     </li> 
 
     <li> 
 
      February 2015 <input type="text" name="janPrice" /><input type="text" name="date" /> 
 
     </li> 
 
      <li> 
 
      March 2015 <input type="text" name="janPrice" /><input type="text" name="date" /> 
 
     </li> 
 
      <li> 
 
      April 2015 <input type="text" name="janPrice" /><input type="text" name="date" /> 
 
     </li> 
 
      <li> 
 
      Haziran 2015 <input type="text" name="janPrice" /><input type="text" name="date" /> 
 
     </li> 
 
      <li> 
 
      June 2015 <input type="text" name="janPrice" /><input type="text" name="date" /> 
 
     </li> 
 
    </ul> 
 
<div>

jsFiddle link

Answer 1

我寫的JavaScript代碼爲您服務。我不確定這是否解決了您的問題。我希望我理解你的權利;）

// Date format dd MM yyyy 
var salaryData = [ 
    { 
     'date': '1.1.2015', 
     'amount':'101' 
    }, 
    { 
     'date': '1.2.2015', 
     'amount':'102' 
    }, 
    { 
     'date': '1.3.2015', 
     'amount':'103' 
    }, 
    { 
     'date': '1.4.2015', 
     'amount':'104' 
    } 
]; 

var monthNames = ["January", "February", "March", "April", "May", "June", 
    "July", "August", "September", "October", "November", "December" 
]; 

var list = document.getElementsByTagName("ul"); 

var month = salaryData.map(function(salary) { 
    return filterMonth(salary.date); 
}); 

var year = salaryData.map(function(salary) { 
    return filterYear(salary.date); 
}); 


salaryData.forEach(function(salary, index){ 
    var listEntry = "<li>"+ month[index] +" "+ year[index] +" <input type='text' name='janPrice' value='"+ salaryData[index].amount +"' /><input type='text' name='year' value='"+ salaryData[index].date +"' />"; 
    list[0].innerHTML += listEntry; 
}); 

function filterMonth(strDate) { 
    var dateParts = strDate.split("."); 
    var d = new Date(dateParts[2], (dateParts[1] - 1), dateParts[0]); 
    return monthNames[d.getMonth()]; 
} 

function filterYear(strDate) { 
    var dateParts = strDate.split("."); 
    var d = new Date(dateParts[2], (dateParts[1] - 1), dateParts[0]); 
    return d.getFullYear(); 
} 

http://jsfiddle.net/unqq5vsk/2/

首先，我糾正你的數據容器。然後我從數組對象中讀取月份和年份屬性，並生成HTML以輸出文件。

Answer 2

您的數據格式爲salaryData對於JavaScript無效。你想要在你的包裝數組中嵌套對象，例如：[{id: val}, {id: val}]。這是因爲在JavaScript中沒有關聯數組（所有東西都是對象）。

修復此問題後，存在以下問題：您的示例數據與您的問題不一致：因爲我必須生成文本框第一個日期月份至今天月份。它目前是5月，但是你的數據有6個月（假設你的數據中的月份是基於1的），所以我從你的salaryData中刪除了這個數據點，這是我們以後看不到的。

現在我們有一個正確的示例數據集。

最後您評論：即使日期不在數據中我想查看空輸入。 所以這裏去更新例如版本（生成從一月的textarea對當月，並與其中的可用數據填充它們）：

var salaryData = [{'date':'1.1.2015','amount':'100'},{'date':'5.3.2015','amount':'105'},{'date':'8.4.2015','amount':'1900'}]; 
 

 
console.log(
 
    demo(document.getElementsByTagName('div')[0], salaryData).innerHTML 
 
); 
 

 
function demo(par, data){ 
 
    var a = document.createElement('li') 
 
    , b = document.createElement('input') 
 
    , ul = document.createElement('ul') 
 
    , ml = [ 'January','February','March','April','May','June','July' 
 
      , 'August','September','October','November','December' 
 
      ] 
 
    , ms = [ 'jan','feb','mar','apr','may','jun','jul' 
 
      , 'aug','sep','oct','nov','dec' 
 
      ] 
 
    , t = new Date() 
 
    , y = t.getFullYear() 
 
    , m = t.getMonth()+1 
 
    , i 
 
    ; //end local vars 
 

 
    b.setAttribute('type','text'); 
 
    ul.appendChild(a.cloneNode(false)).innerHTML = 'Amount/Date'; 
 

 
    // build inputs in DOM 
 
    for(i = 0; i<m; ++i) { 
 
    t = a.cloneNode(false); 
 
    t.innerHTML = ml[i] + ' ' + y + ' '; 
 
    t.appendChild(b.cloneNode(false)).setAttribute('name', ms[i] + 'Price'); 
 
    t.appendChild(b.cloneNode(false)).setAttribute('name', ms[i] + 'Date'); 
 
    ul.appendChild(t); 
 
    } 
 

 
    // Set values 
 
    b = ul.getElementsByTagName('input'); 
 
    for(i = 0; t = data[i++];) { 
 
    a = (t.date.split('.')[1]-1)*2; 
 
    b[a].setAttribute('value', t.amount); 
 
    b[a+1].setAttribute('value', t.date); 
 
    } 
 

 
    // Output/return .. whatever floats your boat.. ARRR 
 
    return par.appendChild(ul); 
 
}

<div><h1>Salary days</h1></div>

你可以重寫演示的第一部分 - 功能使用基於文本的元素創造，如果你願意，因爲你沒有指定你要與功能互動。