Question

嗨，我正在尝试将Stripe付款按钮集成到我的Datatables.net表中。

有没有办法将某些变量从单元格传递到Stripe按钮API？

我当前的JavaScript

  window.onmousedown = function(){

    for (var i=0; i<orderHistory.length; i++){

        for (var k=0; k<orderHistory[i].length; k++){
      var PN =  (orderHistory[i][k].overall_usd_price * 100)
  
  var priceN = parseFloat(PN)

  console.log(PN)
  
  document.getElementById('card_class').addEventListener('click', function(e) {
    // Open Checkout with further options:
    handler.open({
      name: 'omega',
      description: 'Credit / Debit Card Payment',
      zipCode: true,
      amount: priceN
    });
    e.preventDefault();
  });
  
}
}
  // Close Checkout on page navigation:
  window.addEventListener('popstate', function() {
    handler.close();
    
  })
  }

下面是我如何创建表格

window.onload = function(){

var items = [] 

var tableDiv = document.getElementById("clientorders"); 

var table = document.createElement('table');
table.setAttribute('id', 'datatable-buttons');
table.setAttribute('class', 'table table-flush');

var thead = document.createElement('thead');
var tbody= document.createElement('tbody');  
var tr = document.createElement('tr');

table.appendChild(thead);


//create header
thead.appendChild(tr);

var heading = [
    "Order Date",
    "Order Time",
    "Username", 
    "Email", 
    "Phone No.", 
    "Payment Type",
    "Order Summary",
    "Order Gross",
    "Order Cost",
    "Order Net",
    "Order Status",
    "Confirmed Date", 
    "Confirmed Time", 
    "Order Length",  
    "Confirmed Exp Date" , 
    "Confirmed Exp Time" , 
    "Order Remainder",
    "Order ID",

];

for (var col = 0; col<heading.length; col++)
{
  
  var th = 
document.createElement('th');

thead.appendChild(th); 
  th.appendChild(document.createTextNode(heading[col]));
  tr.appendChild(th);
}


// table content

table.appendChild(tbody);

for (var i=0; i<orderHistory.length; i++){

for (var k=0; k<orderHistory[i].length; k++){

    var tr = document.createElement('TR');  
        var td1 = document.createElement('TD');
        var td2 = document.createElement('TD');
        var td3 = document.createElement('TD');
        var td4 = document.createElement('TD');
        var td5 = document.createElement('TD');
        var td6 = document.createElement('TD');
        var td7 = document.createElement('TD');
        var td8 = document.createElement('TD');
        var td9 = document.createElement('TD');
        var td10 = document.createElement('TD');
        var td11 = document.createElement('TD');
        var td12 = document.createElement('TD');
        var td13 = document.createElement('TD');
        td13.setAttribute('class', 'text-center')
        var td14 = document.createElement('TD');
        var td15 = document.createElement('TD');
        var td16 = document.createElement('TD');
        var td17 = document.createElement('TD');
        var td18 = document.createElement('TD');

// if statements

var btchr = orderHistory[i][k].btc_hr
var btcpwr = orderHistory[i][k].btc_pwr
var btcpkglength = orderHistory[i][k].btc_pkg_length

var xmrhr = orderHistory[i][k].xmr_hr
var xmrpwr = orderHistory[i][k].xmr_pwr
var xmrpkglength = orderHistory[i][k].xmr_pkg_length

var ethhr = orderHistory[i][k].eth_hr
var ethpwr = orderHistory[i][k].eth_pwr
var ethpkglength = orderHistory[i][k].eth_pkg_length

var ltchr = orderHistory[i][k].ltc_hr
var ltcpwr = orderHistory[i][k].ltc_pwr
var ltcpkglength = orderHistory[i][k].ltc_pkg_length

var zechr = orderHistory[i][k].zec_hr
var zecpwr = orderHistory[i][k].zec_pwr
var zecpkglength = orderHistory[i][k].zec_pkg_length


        if (btcpkglength != null){
            btcpkglength = btcpkglength + " days"
        }
        if (btcpkglength == null){
            btcpkglength = " "
        }

        if (xmrpkglength != null){
            xmrpkglength = xmrpkglength + " days"
        }
        if (xmrpkglength == null){
            xmrpkglength = " "
        }

        if (ethpkglength != null){
            ethpkglength = ethpkglength + " days"
        }
        if (ethpkglength == null){
            ethpkglength = " "
        }

        if (ltcpkglength != null){
            ltcpkglength = ltcpkglength + " days"
        }
        if (ltcpkglength == null){
            ltcpkglength = " "
        }

        if (zecpkglength != null){
            zecpkglength = zecpkglength + " days"
        }
        if (zecpkglength == null){
            zecpkglength = " "
        }


        if (btchr != null){
            btchr = btchr + " TH/s for BTC @ " + btcpwr + "w power consumption"
        }
        if (btchr == null){
            btchr = " "
        }

        if (xmrhr != null){
            xmrhr = xmrhr + " h/s for XMR @ " + xmrpwr + "w power consumption"
        }
        if (xmrhr == null){
            xmrhr = " "
        }

        if (ethhr != null){
            ethhr = ethhr + " MH/s for ETH @ " + ethpwr + "w power consumption"
        }
        if (ethhr == null){
            ethhr = " "
        }

        if (ltchr != null){
            ltchr = ltchr + " MH/s for LTC @ " + ltcpwr + "w power consumption"
        }
        if (ltchr == null){
            ltchr = " "
        }

        if (zechr != null){
            zechr = zechr + " Sol/s for ZEC @ " + zecpwr + "w power consumption"
        }
        if (zechr == null){
            zechr = " "
        }     



        var today = moment();
        var orderdateexp = moment('4/24/2019')

    // ecmascript 6 version of summary
    var hr = (btchr + xmrhr + ethhr + ltchr + zechr);
    var length = (btcpkglength + xmrpkglength + ethpkglength + ltcpkglength + zecpkglength);
    //    var remainder = orderHistory[i][k].order_confirm_exp_date_time.diff(today, 'days')
    var ordercost = '$300.00'

    var date = '04-28-2022'; // Month/day/year
    var time = '19:28';
    var order_confirm_exp_date_time=(moment(date, 'MM-DD-YYYY').format('MMMM D'))
    var remainder = (orderdateexp.diff(today, 'days') + ' days')


  

    // table variables


    var price = ('$' + orderHistory[i][k].overall_usd_price + '.00')


    var priceU = parseInt(price.replace(/\$|,/g, ''))
    var ordercostU = parseInt(ordercost.replace(/\$|,/g, ''))

    var ordernet = '$' + ((priceU - ordercostU)).toFixed(2)

    var priceNumber = (orderHistory[i][k].overall_usd_price + .00)

    var status = orderHistory[i][k].status


    var paymentID = orderHistory[i][k].payment_id;

    var paymentMethod = orderHistory[i][k].paymentMethod;

    var statusbtn = document.createElement('span');

    if (orderHistory[i][k].paymentMethod === 'card' && orderHistory[i][k].status === true) {
        statusbtn.innerHTML = 'Confirmed';
        statusbtn.setAttribute('class', 'confirmed');
        paymentMethod = 'Credit / Debit Card'
        method = paymentMethod
    }
    
    if (orderHistory[i][k].paymentMethod === 'crypto' && orderHistory[i][k].status === true) {
        statusbtn.innerHTML = 'Confirmed';
        statusbtn.setAttribute('class', 'confirmed');
        paymentMethod = 'Cryptocurrency Transfer'
        method = paymentMethod
        }
    
    if (orderHistory[i][k].paymentMethod === 'wire' && orderHistory[i][k].status === true) {
        statusbtn.innerHTML = 'Confirmed';;
        statusbtn.setAttribute('class', 'confirmed');
        var method = 'Wire Transfer ID ' + paymentID
    }
    
    if (orderHistory[i][k].paymentMethod === 'card' && status === false) {
        var paymentMethod = 'Credit / Debit Card'
        var method = paymentMethod
        var statusbtn = document.createElement("button");
        statusbtn.setAttribute("id", "card_class");
        statusbtn.setAttribute('class', 'btn btn-warning');
        statusbtn.appendChild(document.createTextNode("Pay with Card"));
    }
    
    if (orderHistory[i][k].paymentMethod === 'crypto' & orderHistory[i][k].status === false) {
        var paymentMethod = 'Crypto'
        var method = paymentMethod
        var statusbtn =document.createElement("button");
    
        statusbtn.setAttribute("onclick", "location.href='/crypto'");
        statusbtn.setAttribute("id", "crypto_class");
        statusbtn.setAttribute("href", "/crypto");
        statusbtn.setAttribute('class', 'btn');
        statusbtn.appendChild(document.createTextNode("Pay with Crypto"));
    }
    
    if (orderHistory[i][k].paymentMethod === 'wire' && orderHistory[i][k].status === false) {
        statusbtn.setAttribute('class', 'unconfirmed');
        var method = 'Wire Transfer ID ' + paymentID
        statusbtn.innerHTML = 'Unconfirmed';
    }



        
        td1.appendChild(document.createTextNode(orderHistory[i][k].order_date_time.split('T')[0]));
        td2.appendChild(document.createTextNode(orderHistory[i][k].order_date_time.split('T')[1].split('.')[0]));
        td3.appendChild(document.createTextNode(user[i].username));
        td4.appendChild(document.createTextNode(user[i].email));
        td5.appendChild(document.createTextNode(user[i].tel));
        td6.appendChild(document.createTextNode(method));
        td7.appendChild(document.createTextNode(hr));
        td8.appendChild(document.createTextNode(price));
        td9.appendChild(document.createTextNode(ordercost));
        td10.appendChild(document.createTextNode(ordernet));
        td11.appendChild(statusbtn);
        // td12.appendChild(document.createTextNode(order_confirm_date_time))
        //td12.appendChild(document.createTextNode(orderHistory[i][k].order_confirm_date_time.split('T')[0]));
        //td13.appendChild(document.createTextNode(orderHistory[i][k].order_confirm_date_time.split('T')[1].split('.')[0]));
        td14.appendChild(document.createTextNode(length));
        //td15.appendChild(document.createTextNode(orderHistory[i][k].order_confirm_exp_date_time.split('T')[0]));
        //td16.appendChild(document.createTextNode(orderHistory[i][k].order_confirm_exp_date_time.split('T')[1].split('.')[0]));
        td17.appendChild(document.createTextNode(remainder));
        td18.appendChild(document.createTextNode(orderHistory[i][k]._id));




        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tr.appendChild(td4);
        tr.appendChild(td5);
        tr.appendChild(td6);
        tr.appendChild(td7);
        tr.appendChild(td8);
        tr.appendChild(td9);
        tr.appendChild(td10);
        tr.appendChild(td11);
        tr.appendChild(td12);
        tr.appendChild(td13);
        tr.appendChild(td14);
        tr.appendChild(td15);
        tr.appendChild(td16);
        tr.appendChild(td17);
        tr.appendChild(td18);


        tbody.appendChild(tr);

    }
}




tableDiv.appendChild(table)

}

                h3.mb-0 All Orders
                p.text-sm.mb-0
                  | This is a data log of all omega orders. This includes the date of order, expiration, cryptocurrency, hashrate, cost, payment options.
              .table-responsive.py-4#clientorders

更多乱码...

Answer 1

您不应对多个元素使用id，因为getElementById将仅获取找到的第一个元素，而应使用class，或者您可以在创建按钮元素后绑定onclick事件

所以请尝试更改

if (orderHistory[i][k].paymentMethod === 'card' && status === false) {
        var paymentMethod = 'Credit / Debit Card'
        var method = paymentMethod
        var statusbtn = document.createElement("button");
        statusbtn.setAttribute("id", "card_class");
        statusbtn.setAttribute('class', 'btn btn-warning');
        statusbtn.appendChild(document.createTextNode("Pay with Card"));
    }

进入

if (orderHistory[i][k].paymentMethod === 'card' && status === false) {
        var paymentMethod = 'Credit / Debit Card'
        var method = paymentMethod
        var statusbtn = document.createElement("button");
        // statusbtn.setAttribute("id", "card_class"); // -> remove this
        statusbtn.setAttribute('class', ' card_class btn btn-warning');
        statusbtn.setAttribute('data-customdata', 'some-data'); // -> you can pass your data by using element data attribute (with data- prefix)
        statusbtn.appendChild(document.createTextNode("Pay with Card"));
        // bind onclick event
        statusbtn.addEventListener('click', function(e) {
           e.preventDefault();
           // get your data using dataset (your 'customdata' will be available as datasets property ) like this :
           var data = this.datasets.customdata;
           // do other task here 
        });
    }

Datatables.net +条纹？

1 个答案: