CODEWITHSUNDEEP
javascript
CoderJay
CoderJay

Reputation: 63

Add option Attribute to a selected row in a table in HTML

I have a table as below, in my table I can add new rows and select a row and delete it.

My Table

My problem is that I want to be able to select any row and add (select a color) attribute to it. with the below function I can add the option attribute but it adds it at the end of my table and not in the selected row. Can anyone help me solve this issue. Thanks!

table 2

This is my function to add a attribute to my row:

        var selectionColor = 0
            function addColor(tableID) {
            var select = document.getElementById("color")
            var clone = select.cloneNode(true)
            var name = select.getAttribute("name") + selectionColor++
            clone.id = name
            clone.setAttribute("name", name)

            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.appendChild(clone);
                }
            }
            }catch(e) {
                alert(e);
            }
        }

HTML part of my code:

      <table id="Table">
                  <tr>
                      <th colspan="4" style="text-align: center;">Color Selection</th>
                  </tr>
                  <tr>
                      <th style="text-align: center;">Select</th>
                      <th style="text-align: center;">Color Selection</th>
                      <th style="text-align: center;">Quantity</th>
                  </tr>
                  <tr>
            <td><input type="checkbox" name="chk"/></td>
            <td id="des">

                <select id="color" name="color">
                    <option disabled selected value>select a color</option>                        
                    <option value="wh">White</option>
                    <option value="blc">Black</option>
                    <option value="gry">Grey</option>
                    <option value="blu">Blue</option>
                    <option value="rd">Red</option>
                </select>  

            </td>    
            <td><span id="fbskin-qty"></span></td>
        </tr>
    </table><br/>

    <div class="button-div" style="text-align:center; margin:15px auto;">
        <input type="button" value="Add a New Row" onclick="addRow('fbskinTable')" />
        <input type="button" value="Delete Row" onclick="deleteRow('fbskinTable')" />

        <br/><br/>

        <input type="button" value="Add A New Color" onclick="addColor('fbskinTable')" />


    </div>

Upvotes: 0

Views: 1076

Answers (1)

basic
basic

Reputation: 3408

You are appending to the table when you should be appending to the cell.

Change:

table.appendChild(clone);

To:

row.cells[1].appendChild(clone);

Upvotes: 1

Related Questions