Question

我有日期和金额数据。我想将这些数据填充到正确的文本输入中。正如你在jsFiddle中看到的那样，有些月份有数据，有些月份没有数据。

在下面的示例中，我手动生成输入，但我需要使用for循环创建它们，因为我必须在第一个日期月到今天的月份生成文本框。

这样做的简单方法是什么？

的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中没有关联数组（一切都是对象）。

修复此问题后，您的示例数据会出现与您的问题不一致的问题：因为我必须首先生成日期月份到今天月份的文本框。目前是五月，但您的数据是第6个月（假设您的数据中的月份是基于1的），因此我从salaryData中删除了该数据点，因为我们无法看到在将来。

现在我们有一个正确的示例数据集。

最后你发表了评论：即使日期不在数据中，我也希望看到空输入。 所以这里是更新的示例版本（从1月到当月生成textarea＆并使用可用的数据填充它们）：

＆＃13;

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);
}

＆＃13;

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

＆＃13;

如果您愿意，可以重写演示函数的第一部分以使用基于文本的元素创建，因为您还没有指定您希望与该函数进行交互。

使用JavaScript使用数据库日期填充文本框

2 个答案: