CODEWITHSUNDEEP
javascripthtmlarrays
RonCajan
RonCajan

Reputation: 139

How to add data on selected cell rows in javascript?

I'm doing a web-based POS on PHP. There are two tables; the purpose of the first table is to fetch the products from search box from the database.If the products are available, I will mark the checkbox,click the 'Enter' Button and transfer it to the second table.I'd watch tutorials how to transfer row data from another table but my problem is I can only transfer the row in the first table and I want to add another data on cell because its lacking information.

I'll add picture of what I've done. https://i.sstatic.net/rdSSf.png 

function tab1_to_tab2()
{
    var table1 = document.getElementById("table1"),
        table2 = document.getElementById("table2"),
        checkboxes = document.getElementsByName("tab1");
        console.log("Val1 = " + checkboxes.length);
        for(var i = 0; i < checkboxes.length; i++)
            if (checkboxes[i].checked) {
                var newRow = table2.insertRow(table2.length),
                    cell1 = newRow.insertCell(0),
                    cell2 = newRow.insertCell(1),
                    cell3 = newRow.insertCell(2),
                    cell4 = newRow.insertCell(3);

                    cell1.innerHTML = table1.rows[i+1].cells[0].innerHTML;
                    cell2.innerHTML = table1.rows[i+1].cells[1].innerHTML;
                    cell3.innerHTML = table1.rows[i+1].cells[2].innerHTML;
                    cell4.innerHTML = table1.rows[i+1].cells[3].innerHTML;

                    console.log(checkboxes.length);
            }
}

I expect that column 'Qty','Subtotal' and 'Action' will be filled after I transfer rows from first table.

Upvotes: 1

Views: 350

Answers (1)

BadPiggie
BadPiggie

Reputation: 6359

There are many ways. You can do like this also,

function add(){
  $('input:checked[name=actionBox]').each(function() {
    var product = $(this).attr('data-product');
    var price = $(this).attr('data-price');
  $('#bill').append("<tr><td>"+product+"</td><td>"+price+"</td><tr>");
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border>
  <tr>
    <th>Item</th>
    <th>Price</th>
    <th>action</th>
  </tr>
  <tr>
    <td>Sample product 1</td>
    <td>200.00</td>
    <td><input type='checkbox' name='actionBox' data-product='Sample product 1' data-price='200.00'>
  </tr>
  <tr>
    <td>Sample product 1</td>
    <td>200.00</td>
    <td><input type='checkbox' name='actionBox' data-product='Sample product 2' data-price='300.00'>
  </tr>
</table>
<br>
<button onclick='add()'>Enter</button>
<br><br>
<table border>
  <tr>
    <th>Description</th>
    <th>Price</th>
  </tr>
  <tbody id='bill'>
  </tbody>
</table>

Upvotes: 2

Related Questions