JSFiddle - React, Tailwind, and code Playground

by mkdizajn

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="full-width" style="" id="prof2">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="z-index:0; ">
    <div class="custom-form">
      <div class="text-center bg-form" style="width:110%">
        <div class="img-section">
          <a href="#" class=" glyphicon glyphicon-remove" style=" float: left;margin-left: 5px" onclick="document.getElementById('prof2').style.display='none';"></a>
          <h2 style=" font-family: 'Baskerville';color: white">Security Settings</h2>
        </div>
      </div>
      <div class="col-lg-12 col-md-12" style="">
        <table border="1" style=" margin-left: -17px;;width: 383px" class="table2" id='table2'>
          <tbody>
            <tr id='row1'>
              <td colspan="1" style=" width:50%;font-size: 30px;font-family: 'Baskerville'"><img src="5K-HD-Wallpapers-download-Desktop-5K-Wallpapers-Background-for-PC-Desktop-Laptop-18.jpg" alt="" />Adeete</td>
              <td colspan="1" style="width:70%">
                <button class=" btn btn-success" style=" width: 80px;height:35px;margin-top: 4px;;" onclick="add_row(1)">ACCEPT</button>
                <button class=" btn btn-danger" style=" width: 80px;height:35px;margin-left: 5px;;margin-top: 4px;" onclick="delete_row(1)">REJECT</button>
              </td>
            </tr>
            <tr id='row2'>
              <td colspan="1" style=" width:50%;font-size: 30px;font-family: 'Baskerville'"><img src="5K-HD-Wallpapers-download-Desktop-5K-Wallpapers-Background-for-PC-Desktop-Laptop-18.jpg" alt="" />Akanksha</td>
              <td colspan="1" style="width:70%">
                <button class=" btn btn-success" style=" width: 80px;height:35px;margin-top: 4px;;" onclick="add_row(2)">ACCEPT</button>
                <button class=" btn btn-danger" style=" width: 80px;height:35px;margin-left: 5px;;margin-top: 4px;" onclick="delete_row(2)">REJECT</button>
       ...

JavaScript

function delete_row(no) {
  document.getElementById("row" + no + "").outerHTML = "";
}

function add_row(no) {
  document.getElementById('table1').style.display = 'block';
  var data = document.getElementById("row" + no + "");
  var table = document.getElementById('table1');
  var h = data.innerHTML.split("</td>");
  var w = h[0];
  var index = w.indexOf("width:50%");
  var res = w.replace('width:50%', 'width:1020px');
  var res1 = res.replace('colspan="1"', '');
  console.log(table.rows + " " + table.rows.length + " " + res1 + " ");
  var table_len = (table.rows.length);
  var row = table.insertRow(table_len).outerHTML = "<tr 
  id = 'row"+table_len+"' > "+res1+" < /td></tr > ";;
  document.getElementById("row" + no + "").outerHTML = "";
}