javascript - Delete column contents in html table with loop -


i have html table rows filled loop , want delete last 2 columns rows inside click event on print button :

js :

$("#print").on('click', function(){        //i want remove columns here })  

how can this?

i'm not sure if looking (delete columns or columns content) can try followings suggestions.

delete last 2 columnns :

you can call following code remove last child several times as number of columns want remove :

$("table").find("th:last-child, td:last-child").remove(); 

$("#print").on('click', function(){        var remove_cols_number =2;            for(var i=0;i<remove_cols_number;i++){      	$("table").find("th:last-child, td:last-child").remove();      }  }) 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <table style="width:100%" border='1'>    <tr>      <th>column 1</th>      <th>column 2</th>       <th>column 3</th>      <th>column 4</th>      <th>column 5</th>    </tr>    <tr>      <td>jill</td>      <td>smith</td>       <td>50</td>       <td>bill</td>      <td>2</td>    </tr>    <tr>      <td>eve</td>      <td>jackson</td>       <td>94</td>      <td>gates</td>      <td>1</td>    </tr>  </table>  <br>  <button id='print' type="button">print</button>

delete last 2 columns content :

you can columns length , remove 1 since eq() use 0 based index, use empty() remove content of last 1 , column before last 1 -1 :

var columns_length = $("table th").length-1;  $("table tr").find("td:eq("+columns_length+"), td:eq("+(columns_length-1)+")").empty(); 

$("#print").on('click', function(){        var columns_length = $("table th").length-1;        $("table tr").find("td:eq("+columns_length+"), td:eq("+(columns_length-1)+")").empty();  }) 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <table style="width:100%" border='1'>    <tr>      <th>column 1</th>      <th>column 2</th>       <th>column 3</th>      <th>column 4</th>      <th>column 5</th>    </tr>    <tr>      <td>jill</td>      <td>smith</td>       <td>50</td>       <td>bill</td>      <td>2</td>    </tr>    <tr>      <td>eve</td>      <td>jackson</td>       <td>94</td>      <td>gates</td>      <td>1</td>    </tr>  </table>  <br>  <button id='print' type="button">print</button>


Comments

Popular posts from this blog

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

javascript - Get parameter of GET request -

javascript - Twitter Bootstrap - how to add some more margin between tooltip popup and element -