Dragging a html table column value and increment the column value by 1 in java script

Question

I need to increment an html table column value by 1.

For example, I have three columns in the table and the column value for the first row is 1, the second should be 2 etc.

So, If I have Roll No column with first column value is 1 then the next two rows Roll No value should be 2 and 3.

The following script does not work.

<!DOCTYPE html>
<html>
<head>
<script>
 function myFunction() {
        //document.getElementById('info').innerHTML = "";
        var myTab = document.getElementById('sample_table');
        var rollNo=document.getElementById('input2').value;
        // LOOP THROUGH EACH ROW OF THE TABLE AFTER HEADER.
        var count=0;
        for (var i = 1; i < myTab.rows.length; i++) {

            // GET THE CELLS COLLECTION OF THE CURRENT ROW.
            var objCells = myTab.rows.item(i).cells;

            // LOOP THROUGH EACH CELL OF THE CURENT ROW TO READ CELL VALUES.
            for (var j = 0; j < objCells.length; j++) {
                count++;
                //alert('hi'+count);
                if(count>1){
                     myTab.rows[i].cells[j+1].innerHTML=rollNo+1;
                }
            }

        }
    }
</script>
</head>
<body onload="myFunction()">

<table id='sample_table'>
<tr>
<th> Name</th>
<th> Roll No</th>
</tr>
<tr>
<td><input id='input1' value='abc' readonly></td>
<td><input id='input2' value='1' ></td>
</tr>
<tr>
<td><input id='input3' value='def' readonly></td>
<td><input id='input4'  ></td>
</tr>
<tr>
<td><input id='input5' value='xyz' readonly></td>
<td><input id='input6'  ></td>
</tr>

</table>

</body>
</html>

Do you want an automated row numbering system when you drag rows in the table? — Teemu, Mar 05 '20 at 19:26
Can you advise what error you receive? Load the "console" in the Javascript debugger. This is quite probably because you are running code in — Robbie, Mar 06 '20 at 01:32
I want the roll no column is incremented by one based on the first roll no column value.In my code I tried to get the first column roll no value and based on that try to increment. But not getting the expected result. — stumbler, Mar 06 '20 at 02:44

score 0 · Answer 1 · answered Mar 05 '20 at 17:09

0

I'm guessing something like

rowspan="2"

or

colspan="2"

but we need the code the image is good for reference but we need something to work with.

answered Mar 05 '20 at 17:09

Aaron Davis

140
1
7

Teemu · Accepted Answer · 2020-03-06T06:29:01.033

0

You can get all the inputs in a column using querySelectorAll, like this:

document.addEventListener('DOMContentLoaded', function() {
  // Collects all the inputs from the 2nd column
  const inputs = document.querySelectorAll('#sample_table td:nth-child(2) input');
  // Get the value of the first input in the collection, and convert it to number
  const first = +inputs[0].value;
  // Iterate through the inputs in the collection excluding the first one
  for (let n = 1, eN = inputs.length; n < eN; n++) {
    inputs[n].value = first + n;
  }
});

<table id="sample_table">
  <tr>
    <th> Name</th>
    <th> Roll No</th>
  </tr>
  <tr>
    <td><input id="input1" value="abc" readonly></td>
    <td><input id="input2" value="5"></td>
  </tr>
  <tr>
    <td><input id="input3" value="def" readonly></td>
    <td><input id="input4"></td>
  </tr>
  <tr>
    <td><input id="input5" value="xyz" readonly></td>
    <td><input id="input6"></td>
  </tr>
</table>

If the column of the inputs is changed, the number in nth-child() can be changed to point to the correct column. This indexing is 1-based.

edited Mar 06 '20 at 06:29

answered Mar 06 '20 at 06:22

Teemu

22,918
7
53
106

Wow!fantastic.Can we get a excel like dragging features ?When try to select the value and then drag ,the below column value got incremented. – stumbler Mar 06 '20 at 06:35
Yes, that's possible, but it's a subject for a new question. – Teemu Mar 06 '20 at 06:36
I have mentioned that in the question as well.I think for that I ahve another questions alreay posted.https://stackoverflow.com/questions/60542360/drag-a-selected-input-box-in-numerical-order/60543073?noredirect=1#comment107110193_60543073 – stumbler Mar 06 '20 at 06:41
For the task in the linked question, I'd checked the value of the input in the previous cell on mouseenter. Rows have `rowIndex` and cells have `cellIndex` property, it's easy to get those indices from `event.target` and its parent. As a whole, emulating Excel table is not a trivial task, you've to plan it very carefully to get some code actually work. – Teemu Mar 06 '20 at 06:51
actualy I dont want exact excel like table but only the excel like draggable feature to increment the next column value . Do you have any reference of this kind? – stumbler Mar 06 '20 at 07:32

Dragging a html table column value and increment the column value by 1 in java script

2 Answers2