仅删除复选框选中的列表格来自HTML表格

时间:2015-11-15 12:14:37

标签: javascript jquery

我正在尝试删除复选框选中的HTML列但是现在在删除时单击最后一列被删除我想要的是删除单击所有复选框选中的列应该被删除

并在添加期间点击我的表获取自动增量

JS Demo

HTML:

<table border="1" id="TimeTable_Table" style="       margin-left: 1%; border-collapse: collapse;   text-align: left; width:98%;">
    <thead>
        <tr>
            <td>Days</td>
            <td>Period 1</td>
            <th>Period 2</th>

        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input name="ctl00$BodyHolder$tb1" type="text" value="Monday" readonly="readonly" id="BodyHolder_tb1">
            </td>
            <td>
                <select name="ctl00$BodyHolder$DD_Sub1" id="BodyHolder_DD_Sub1" class="DD_Sub" style="height:27px;width:150px;">
                    <option value="Select Subject">Select Subject</option>
                    <option value="Holiday">Holiday</option>
                    <option value="Lunch">Lunch</option>
                    <option value="ECO-20">ECO-20</option>
                    <option value="ECO-22">ECO-22</option>

                </select>
                <br>
                <select name="ctl00$BodyHolder$DD_TName1" id="BodyHolder_DD_TName1" class="DD_TName" style="height:27px;width:150px;">
           <option value="Select Teacher">Select Teacher</option>
                    <option value="No Class">No Class</option>
                    <option value="FTPW40">ArunKumar. K</option>
                    <option value="FTPW46">Asha Rani.S</option>
                    <option value="FTPW48">Ashwini.V Bhat</option>
                    <option value="FTPW11">B.C.Shiva Kumar</option>
                    <option value="FTPW53">Chandrashekar K.S</option>
                    <option value="FTPW36">Chandru. E</option>
                    <option value="FTPW54">Lokesh.C.S</option>
                </select>
            </td>
            <td>
                <select name="ctl00$BodyHolder$DD_Sub1" id="BodyHolder_DD_Sub1" class="DD_Sub" style="height:27px;width:150px;">
                             <option value="Select Subject">Select Subject</option>
                    <option value="Holiday">Holiday</option>
                    <option value="Lunch">Lunch</option>
                    <option value="ECO-20">ECO-20</option>
                    <option value="ECO-22">ECO-22</option>
                </select>
                <br>
                <select name="ctl00$BodyHolder$DD_TName1" id="BodyHolder_DD_TName1" class="DD_TName" style="height:27px;width:150px;">
       <option value="Select Teacher">Select Teacher</option>
                    <option value="No Class">No Class</option>
                    <option value="FTPW40">ArunKumar. K</option>
                    <option value="FTPW46">Asha Rani.S</option>
                    <option value="FTPW48">Ashwini.V Bhat</option>
                    <option value="FTPW11">B.C.Shiva Kumar</option>
                    <option value="FTPW53">Chandrashekar K.S</option>
                    <option value="FTPW36">Chandru. E</option>
                    <option value="FTPW54">Lokesh.C.S</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <input name="ctl00$BodyHolder$TextBox1" type="text" value="Tuesday" readonly="readonly" id="BodyHolder_TextBox1">
            </td>
            <td>
                <select name="ctl00$BodyHolder$DD_Sub2" id="BodyHolder_DD_Sub2" class="DD_Sub" style="height:27px;width:150px;">
                            <option value="Select Subject">Select Subject</option>
                    <option value="Holiday">Holiday</option>
                    <option value="Lunch">Lunch</option>
                    <option value="ECO-20">ECO-20</option>
                    <option value="ECO-22">ECO-22</option>
                </select>
                <br>
                <select name="ctl00$BodyHolder$DD_TName2" id="BodyHolder_DD_TName2" class="DD_TName" style="height:27px;width:150px;">
       <option value="Select Teacher">Select Teacher</option>
                    <option value="No Class">No Class</option>
                    <option value="FTPW40">ArunKumar. K</option>
                    <option value="FTPW46">Asha Rani.S</option>
                    <option value="FTPW48">Ashwini.V Bhat</option>
                    <option value="FTPW11">B.C.Shiva Kumar</option>
                    <option value="FTPW53">Chandrashekar K.S</option>
                    <option value="FTPW36">Chandru. E</option>
                    <option value="FTPW54">Lokesh.C.S</option>
                </select>
            </td>
            <td>
                <select name="ctl00$BodyHolder$DD_Sub2" id="BodyHolder_DD_Sub2" class="DD_Sub" style="height:27px;width:150px;">
          <option value="Select Subject">Select Subject</option>
                    <option value="Holiday">Holiday</option>
                    <option value="Lunch">Lunch</option>
                    <option value="ECO-20">ECO-20</option>
                    <option value="ECO-22">ECO-22</option>
                </select>
                <br>
                <select name="ctl00$BodyHolder$DD_TName2" id="BodyHolder_DD_TName2" class="DD_TName" style="height:27px;width:150px;">
       <option value="Select Teacher">Select Teacher</option>
                    <option value="No Class">No Class</option>
                    <option value="FTPW40">ArunKumar. K</option>
                    <option value="FTPW46">Asha Rani.S</option>
                    <option value="FTPW48">Ashwini.V Bhat</option>
                    <option value="FTPW11">B.C.Shiva Kumar</option>
                    <option value="FTPW53">Chandrashekar K.S</option>
                    <option value="FTPW36">Chandru. E</option>
                    <option value="FTPW54">Lokesh.C.S</option>
                </select>
                <br>
                <select name="ctl00$BodyHolder$DD_TName2" id="BodyHolder_DD_TName2" class="DD_TName" style="height:27px;width:150px;">
       <option value="Select Teacher">Select Teacher</option>
                    <option value="No Class">No Class</option>
                    <option value="FTPW40">ArunKumar. K</option>
                    <option value="FTPW46">Asha Rani.S</option>
                    <option value="FTPW48">Ashwini.V Bhat</option>
                    <option value="FTPW11">B.C.Shiva Kumar</option>
                    <option value="FTPW53">Chandrashekar K.S</option>
                    <option value="FTPW36">Chandru. E</option>
                    <option value="FTPW54">Lokesh.C.S</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <input name="ctl00$BodyHolder$TextBox2" type="text" value="Wednesday" readonly="readonly" id="BodyHolder_TextBox2">
            </td>
            <td>
                <select name="ctl00$BodyHolder$DD_Sub3" id="BodyHolder_DD_Sub3" class="DD_Sub" style="height:27px;width:150px;">
            <option value="Select Subject">Select Subject</option>
                    <option value="Holiday">Holiday</option>
                    <option value="Lunch">Lunch</option>
                    <option value="ECO-20">ECO-20</option>
                    <option value="ECO-22">ECO-22</option>
                </select>
                <br>
                <select name="ctl00$BodyHolder$DD_TName3" id="BodyHolder_DD_TName3" class="DD_TName" style="height:27px;width:150px;">
               <option value="Select Teacher">Select Teacher</option>
                    <option value="No Class">No Class</option>
                    <option value="FTPW40">ArunKumar. K</option>
                    <option value="FTPW46">Asha Rani.S</option>
                    <option value="FTPW48">Ashwini.V Bhat</option>
                    <option value="FTPW11">B.C.Shiva Kumar</option>
                    <option value="FTPW53">Chandrashekar K.S</option>
                    <option value="FTPW36">Chandru. E</option>
                    <option value="FTPW54">Lokesh.C.S</option>
                </select>
            </td>
            <td>
                <select name="ctl00$BodyHolder$DD_Sub3" id="BodyHolder_DD_Sub3" class="DD_Sub" style="height:27px;width:150px;">
             <option value="Select Subject">Select Subject</option>
                    <option value="Holiday">Holiday</option>
                    <option value="Lunch">Lunch</option>
                    <option value="ECO-20">ECO-20</option>
                    <option value="ECO-22">ECO-22</option>
                </select>
                <br>
                <select name="ctl00$BodyHolder$DD_TName3" id="BodyHolder_DD_TName3" class="DD_TName" style="height:27px;width:150px;">
         <option value="Select Teacher">Select Teacher</option>
                    <option value="No Class">No Class</option>
                    <option value="FTPW40">ArunKumar. K</option>
                    <option value="FTPW46">Asha Rani.S</option>
                    <option value="FTPW48">Ashwini.V Bhat</option>
                    <option value="FTPW11">B.C.Shiva Kumar</option>
                    <option value="FTPW53">Chandrashekar K.S</option>
                    <option value="FTPW36">Chandru. E</option>
                    <option value="FTPW54">Lokesh.C.S</option>
                </select>
            </td>

        </tr>
       <tr>
           <td>

           </td>


           <td>
               <input type="checkbox"/>
           </td>


           <td>
               <input type="checkbox"/>
           </td>
    </tbody>
</table>

                <input type="submit" value="Add Period" onclick="return addcourse();" id="BodyHolder_Add_New_period_button">
                     <input type="submit" value="Delete Period's" onclick="return Delete_Column();" id="BodyHolder_Add_New_period_button">

JS:

function addcourse() {



 var newHeader = $('#TimeTable_Table thead tr').append('<th></th>');
                $('#TimeTable_Table').find('th:last()').append('Period ' + ($('#TimeTable_Table thead tr th').length + 1));
                $.each($('#TimeTable_Table tbody').find('tr'), function (i, v) {
                    $(v).append($(v).find('td:last()').clone());
                });
}


function Delete_Column() {

var Cell_Length =document.getElementById('TimeTable_Table').rows[0].cells.length;
    if(Cell_Length =="2")
    {
    alert("This Row Should Not be Deleted");
    }
    else
    {

    $('#TimeTable_Table tr').find('th:last-child, td:last-child').remove();

    }
    }

0 个答案:

没有答案