JSFiddle - React, Tailwind, and code Playground

by amit

HTML

<body>
  <form id="form" action="" method="post" enctype="multipart/form-data" name="a">


    <table width="65%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#EFEFEF">
      <input type="file" name="image">
      <p>



        <td height="243" colspan=3 valign="top">
          <table width="100%" border=0 cellpadding="3">
            <tr>
              <td width="100%" align="left" class="desc"><span class="style5">
        <input type="button" name="Add" value="Add" onclick="addRow();"/>
        <input name="submit" type="button" id="submit" value="Delete" onclick="deleteRow1('tblSample1');" />
      </span></td>
            </tr>
            <tr>
              <td align="left" class="desc">
                <table id="tblSample1">
                </table>
                <input type="hidden" name="tblid" />
                <input type="hidden" name="cid" value="<?php echo $_REQUEST['id']; ?>" />
              </td>
            </tr>
            <tr bgcolor="white">
              <td height="28" colspan="3" align="center">
                <div align="center">
                  <input type="submit" name="submit2" value="Save" class="button1" />
                </div>
              </td>
            </tr>
          </table>
        </td>
        </tr>
    </table>

  </form>



  </html>
</body>

JavaScript

function addRow() {


  var tbl1 = document.getElementById('tblSample1'); //tblSample is the table id.
  var lastRow1 = tbl1.rows.length;

  // if there's no header row in the table, then iteration = lastRow + 1
  var iteration = lastRow1;

  //alert(iteration);
  document.a.tblid.value = iteration;
  var row = tbl1.insertRow(lastRow1);

  var cell1 = row.insertCell(0);
  var element1 = document.createElement("input");
  element1.type = "checkbox";
  cell1.appendChild(element1);

  var cellG = row.insertCell(1);
  var N2sel = document.createElement('input');
  N2sel.type = "file";
  //  N2sel.width=8;
  N2sel.name = 'image-' + iteration;
  N2sel.id = 'image-' + iteration;
  //N2sel.className="white1";
  //N2sel.text=lit;
  //N2sel.setAttribute("onClick","calstotal(this);");
  //cellG.className="gridselect1";
  cellG.appendChild(N2sel);

}

function rcount() {
  var tbl1 = document.getElementById('tblSample1'); //tblSample is the table id.
  var lastRow1 = tbl1.rows.length;
  var iteration = lastRow1 - 1;
  document.a.tblid.value = iteration;

}

function deleteRow1(tblSample1) {

  try {
    var table1 = document.getElementById(tblSample1);
    var rowCount1 = table1.rows.length;

    for (var i = 0; i < rowCount1; i++) {
      //  document.getElementById("etotal").value="ab";
      var row1 = table1.rows[i];
      var chkbox = row1.cells[0].childNodes[0];
      if (null != chkbox && true == chkbox.checked) {

        table1.deleteRow(i);
        rowCount1--;
        i--;
        rcount();
      }
    }


  } catch (e) {
    alert(e);
  }

} < /script>