javascript – how to add two different buttons on same row dynamically in js-ThrowExceptions

Exception or error:

I am building a dynamic table from json data. i want to add two different buttons with different colors dynamically on same row. i want each row to have delete and add buttons but i am finding it difficult.

I want to modify the column to have two different buttons. i dont know if i am doing it the right way.

This is my json data

var myContribution = {
   "contributions": [{
         "txnNo": "00031",
         "name": "Onyinye Okeke",
         "modify": [
            "Delete", "Add"
         ],
         "date": "2020-01-19",
         "amount": "100000",
         "desc": "Weekly"
      },
      {
         "txnNo": "00031",
         "name": "Thompson Philip",
         "modify": [
            "Delete", "Add"
         ],
         "date": "2019-11-09",
         "amount": "70000",
         "desc": "Daily"
      },
      {
         "txnNo": "00033",
         "name": "Eze Chisom",
         "modify": [
            "Delete", "Add"
         ],
         "date": "2020-02-19",
         "amount": "25000",
         "desc": "Weekly"
      }
   ]
};

This is my javaScript code

function contributionData() {
      var contributionData = getSession("contributionData");
     var contributionTable = document.querySelector("#contributionTable");

        if(myContribution.contributions.length>0){
var col = []; // define an empty array
            for (var i = 0; i < myContribution.contributions.length; i++) {
                for (var key in myContribution.contributions[i]) {
                    if (col.indexOf(key) === -1) {
                        col.push(key);
                    }
                }
            } 
            // CREATE TABLE HEAD .
            var tHead = document.querySelector("#tableHead");    

            // CREATE ROW FOR TABLE HEAD .
            var hRow = document.querySelector("#tableRow");

            // ADD COLUMN HEADER TO ROW OF TABLE HEAD.

            tHead.appendChild(hRow);
            contributionTable.appendChild(tHead);

            // CREATE TABLE BODY .
            var tBody = document.createElement("tbody");    

            // ADD COLUMN HEADER TO ROW OF TABLE HEAD.
            for (var i = 0; i < myContribution.contributions.length; i++) {

                    var bRow = document.createElement("tr"); // CREATE ROW FOR EACH RECORD .
                    var td = document.createElement("td");
                            td.innerHTML = i+1;
                            bRow.appendChild(td);
                 for (var j = 0; j < 3; j++) {
                        var td = document.createElement("td");
                        if (j==0) {
                          td.innerHTML = '<a href= "#" onclick = "return contriModalView(' +i+') ">'+myContribution.contributions[i][col[j]]+ '</a>';
                          bRow.appendChild(td);
                        }else{
                        td.innerHTML = myContribution.contributions[i][col[j]];
                        bRow.appendChild(td);
                       }if (j==2) {
                        for(var i = 0; i<2; i++){
                          bRow.appendChild(td);
                           if (td.textContent=="Delete") {
                             td.innerHTML = '<div class="btn btn-danger">'+myContribution.contributions[i][col[j]]+ '</div>';

                           }else{
                             td.innerHTML = '<div class="btn btn-success">'+myContribution.contributions[i][col[j]]+ '</div>';

                          }
                         }

                        }else{
                            td.innerHTML = myContribution.contributions[i][col[j]];
                            bRow.appendChild(td);
                          }
                      }
                    tBody.appendChild(bRow) 
                }
            contributionTable.appendChild(tBody);   
      }
    }

This is my html code

<table class="table table-bordered table-striped table-vcenter js-dataTable-full-pagination table-responsive" id="contributionTable">
   <thead id="tableHead">
      <tr id="tableRow">
         <th class="text-center" style="width: 30%;" id="serialNo">S/N</th>
         <th class="d-sm-table-cell" style="width: 30%;" id="transNo">Txn No</th>
         <th class="d-sm-table-cell" style="width: 30%;" id="Name">Name</th>
         <th class="d-sm-table-cell" style="width: 30%;">Modify</th>
      </tr>
   </thead>
</table>
How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *