locked
change background color of table td RRS feed

  • Question

  • User-952877843 posted

    i have this table i want when i clicked on each td change the color of it for example when i clicked on first td change the color to blue and when i clicked on second td change the color of second td and not change the color of first td it when when all td colors are white i want just change the color of that td's when i clicked on it 

    <table>

    <tr><td></td>

    <td></td>

    </tr>

    <tr><td></td>

    <td></td>

    </tr>

    </table>

    Friday, August 3, 2018 10:49 AM

Answers

  • User-821857111 posted

    Add jQuery:

    <script
      src="https://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"></script>

    Than add this:

    <script>
      $(function(){
    	$('td').on('click', function(){
    		$('td').css('background-color','white');
    		$(this).css('background-color','blue');
    	})
      })
    </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 3, 2018 11:50 AM

All replies

  • User-821857111 posted

    Add jQuery:

    <script
      src="https://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"></script>

    Than add this:

    <script>
      $(function(){
    	$('td').on('click', function(){
    		$('td').css('background-color','white');
    		$(this).css('background-color','blue');
    	})
      })
    </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 3, 2018 11:50 AM
  • User-952877843 posted

    if i want change these action on all td just don't change the color of last td i don' want to change the color of that td how can i do it

    Friday, August 3, 2018 12:02 PM
  • User-821857111 posted
    <script>
      $(function(){
    	$('td:not(:last)').on('click', function(){
    		$('td').css('background-color','white');
    		$(this).css('background-color','blue');
    	})
      })
    </script>
    Friday, August 3, 2018 1:01 PM