CODEWITHSUNDEEP
javascriptformshtml-tableincrement
Edward
Edward

Reputation: 1883

JavaScript - Incrementing a value attribute

I have a problem that I can't get my head around (pretty new to JavaScript). Need to know how to increment variables in HTML with an document.createElement event (if that's the right terminology).

I need to increment the 'value' attribute every time the "Add Row" button is clicked and vise versa for the "Delete Row" button.

So far I have:

HTML 

<div id='ctrl_container'>

    <form action='$thisuri' method='post' id='spa' name='date2'>

    <input type="button" value="Add Row" onclick="addRow('dataTable')" />
    <input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

<table id="dataTable"  border='0' cellspacing='0' cellpadding='0' > 

    <tr>
        <th> Select </th>
        <th> ID </th>
        <th> Question </th>
    </tr>

    <tbody>
    <tr>
        <td> <input type="checkbox" name="chk[]" /> </td>
        <td> 1<input type="hidden" name="Q[]" value="1" /> </td>
        <td> <input type="text" name="txtbox[]" /> </td>
    </tr>
    </tbody>

</table>
    <input type='Submit' value='Submit Planned Audit' name='send'>
    </form>
</div>

JavaScript 

function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = document.getElementById(tableID).getElementsByTagName('tbody')
        [1].getElementsByTagName('tr').length;
        var row = table.insertRow(rowCount +1);

        var cell1 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "hidden";
        element1.name = "Q[]";
        element1.value = rowCount +1;
        cell2.appendChild(element1);
        cell2.innerHTML = rowCount +1;
}

function deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                table.deleteRow(i);
                rowCount--;
                i--;
            }


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

Can someone give me some pointers?

Upvotes: 1

Views: 2675

Answers (2)

Mustafa Gen&#231;
Mustafa Gen&#231;

Reputation: 2579

If you want to increment by name : 

var hiddenInputs = document.getElementsByName("Q[]");

EDIT :

for (var i = 0; i <= hiddenInputs.length; i++) {
    hiddenInputs[i].value = i + 1;
}

Decrement has the same logic. Now, value of the hiddenInput(DOM element) consist your row count

Upvotes: 1

Nick N.
Nick N.

Reputation: 13559

Have a look at this jsFiddle: http://jsfiddle.net/pDxnb/1/

It will definitely give you some pointers, since the row is actually being added visibly now. (The rowcount is not the problem here I guess)

The problem was and still is, is that you are adding empty cells as a row. I have added cell2 to the table and we can see things are happening.

var cell2 = row.insertCell(1);
cell2.appendChild(element1);
cell2.innerHTML = rowCount +1;

also what I did to debug is: 

    alert(rowCount);

You should be able to figure the rest out for yourself. If you need anymore help please comment below.

TIP:

Maybe it would be better to get your highest ID incremented everytime adding a row, and don't worry about the deletion. This way you can never have the same ID's

Upvotes: 1

Related Questions