CODEWITHSUNDEEP
javascriptjqueryhtml
Shaik
Shaik

Reputation: 930

Javascript Clone HTML Column With DropDown

I am trying Create a Clone of last column exist in the table say my last column contains some dropdown the same should be cloned and created a new column am not sure how to do i tried but small help can help me a lot

JS Fiddle Output

HTML:

<table id="tableID">
    <tr>
        <th>day</th>
        <th>
           Dropdown1
        </th>
    </tr>
    <tr>
        <td>1</td>
        <td>
            <select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;">
                <option value="Select Subject">Select Subject</option>
                <option value="Holiday">Holiday</option>
                <option value="Lunch">Lunch</option>
                <option selected="selected" value="ECO-17">ECO-17</option>
                <option value="ECO-19">ECO-19</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>3</td>
        <td>
            <select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;">
                <option value="Select Subject">Select Subject</option>
                <option value="Holiday">Holiday</option>
                <option value="Lunch">Lunch</option>
                <option selected="selected" value="ECO-17">ECO-17</option>
                <option value="ECO-19">ECO-19</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>5</td>
        <td>
            <select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;">
                <option value="Select Subject">Select Subject</option>
                <option value="Holiday">Holiday</option>
                <option value="Lunch">Lunch</option>
                <option selected="selected" value="ECO-17">ECO-17</option>
                <option value="ECO-19">ECO-19</option>
            </select>
        </td>
    </tr>
</table>
<button id="clone">Clone</button>

JS:

$("#clone").on("click", function () {
    $("#tableID tr").each(function () {
        $(this).append("<td>Test</td>");
    });
});

Upvotes: 1

Views: 134

Answers (2)

Cyril Cherian
Cyril Cherian

Reputation: 32327

You can do something like this First give unique ids to select like 

select id="BodyHolder_DD_Sub1"
select id="BodyHolder_DD_Sub2"

On clone

$("#clone").on("click", function () {
    $(".cloned").remove(); //remove the cloned tr
    $("#tableID tr").each(function (d) {

        if (d == 0) {
            $(this).append("<td class='cloned'>Test</td>");
        } else {
            //add the select box value
            $(this).append("<td  class='cloned'>" + $("#BodyHolder_DD_Sub" + d).val() + "</td>");
        }

    });
});

Working code here.

Upvotes: 1

Darren Willows
Darren Willows

Reputation: 2131

The will clone last row and add after last row in table using jQuery:

$("#clone").on("click",function(){

var $tableBody = $('#tableID').find("tbody"),
        $trLast = $tableBody.find("tr:last"),
        $trNew = $trLast.clone();

    $trLast.after($trNew);
});

JSFiddle

Upvotes: 1

Related Questions