如何使用Javascript

时间:2018-10-31 21:46:49

标签: javascript html-table

我有一个动态生成的表,看起来像这样:

enter image description here

这是动态生成表格的方式

var cageref = CatalogueDB.ref("cageawards/" + cagecode).limitToFirst(20);
cageref.on('value', pullInventory, errData);

function pullInventory(data) {
  var container = document.getElementById('inventoryContainer')
  console.log(data.val())
  data.forEach(function(awardsSnap) {
    var awardItem = awardsSnap.val()


    // Attach an asynchronous callback to rea
    var NSNcard = `
        
                <tr>
                    <td class="serial">${awardItem.NSN}</td>
               
                    <td> ${awardItem.Nomenclature} </td>
                    <td>  <span class="serial">${awardItem.Awarddate} </td> 
                    <td> <span class="product">${awardItem.Awardid}</span> </td>
                    <td> 
                        <input type="text" placeholder="i.e. 100 EA" class="form-control" style="width: 110px;">

                     </td>
                    <td> 
                        <input type="text" placeholder="i.e. $9.23 " class="form-control" style="width: 110px;">
                    </td> 
                </tr>

                    `;
    container.innerHTML += NSNcard;
  });
}
<div class="table-stats order-table ov-h">
  <table class="table ">
    <thead>
      <tr>
        <th class="serial">NSN</th>

        <th>Nomenclature</th>
        <th>Award Date</th>
        <th>Award #</th>
        <th>Quantity</th>
        <th>Price per Unit</th>
      </tr>
    </thead>
    <tbody id="inventoryContainer">

    </tbody>
  </table>
</div>
<!-- /.table-stats -->

正在发生的事情是向用户显示了他们的库存,并且在每个项目旁边都有一个用于输入数量和价格的字段。我现在想做的是添加一个“保存”按钮。单击按钮后,我想获取每个可用订单项的数量,价格和其他值。我是javascript的新手,我认为这是可能的。我该怎么办?

Function saveInventory(){
// Get each of the line item values


}

1 个答案:

答案 0 :(得分:1)

如果要通过单击“保存”按钮获取数组中表的值,则可以使用类似的方法

def f(df):    
   return pd.DataFrame(ta.SAR(df.high, df.low, acceleration=0.05, maximum=0.2),columns= ['PSAR'])
y = df.groupby(['symbol']).apply(f)

df['PSAR'] = y.PSAR.reset_index(drop=True)
   

 //Run saveInventory function on Save
    document.querySelector(".btn").addEventListener("click", e => {
      saveInventory();
    });
   
    function saveInventory() {
    //Loop over th and crate column Header array
      const columnHeader = Array.prototype.map.call(
        document.querySelectorAll(".table th"),
        th => {
          return th.innerHTML;
        }
      );
    //Loop over tr elements inside table body and create the object with key being the column header and value the table data.
      const tableContent = Object.values(
        document.querySelectorAll(".table tbody tr")
      ).map(tr => {
        const tableRow = Object.values(tr.querySelectorAll("td")).reduce(
          (accum, curr, i) => {
            const obj = { ...accum };
            obj[columnHeader[i]] = curr.innerHTML;
            return obj;
          },
          {}
        );
        return tableRow;
      });
      console.log(tableContent);
    }