File "test04.html"

Full Path: /home/analogde/www/Prog/MMM/Fusion/table_selection/test04.html
File size: 6.4 KB
MIME-type: text/html
Charset: utf-8

<!--

https://www.rgagnon.com/jsdetails/js-0093.html

https://stackoverflow.com/questions/14443533/highlighting-and-un-highlight-a-table-row-on-click-from-row-to-row
-->

<!--
<link href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.4/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.4/dist/bootstrap-table.min.js"></script>
-->
<style>

/*td {
   padding: 0;
}*/
/*
table{
border : 1px solid #000000;
}
*/

tr:hover {
          background-color: #ffff99;
        }


        .hoverTable{
        width:100%; 
        border-collapse:collapse; 
    }
    .hoverTable td{ 
        padding:7px; border:#4e95f4 1px solid;
    }
    /* Define the default color for all the table rows */
    .hoverTable tr{
        background: #b8d1f3;
    }
    /* Define the hover highlight color for the table row */
    .hoverTable tr:hover {
          background-color: #ffff99;
    }


    .checkbox{ 
    text-align: center; 
 /*Centering the text in a td of the table*/ 
  } 
</style>

<script>

    //let objet_table = document.getElementById('dataTable');
   
    //let nb_rows = objet_table.rows.length;
    
   // var pipo = document.getElementById('dataTable');
    //const rowCount = pipo[0].childElementCount;
    //console.log(" NB rows " + rowCount );


    //let table_status = new Array(5);

   // table_status[4] = "toto";

   // console.log(table_status);

function highlight(element)
{
   // var table = document.getElementById('dataTable');

    //console.log(table);
   // element.style.backgroundColor='#BCD4EC';

   // console.log( element.rowIndex);

   // console.log( document.getElementById('dataTable').rows.length );

  //  console.log(" NB rows " + table.rows.length);

    //element.rowIndex

    //if( element.rowIndex )

    

    if ( table_status[ element.rowIndex] == "unselected" )
    {
        element.style.backgroundColor='#BCD4EC';
        table_status[ element.rowIndex] = "selected";
        console.log("selection");
    }
    else
    {
        element.style.backgroundColor='#FFFF';
        table_status[ element.rowIndex] = "unselected";
        console.log("normale");

    }

   
}

function myFunction()
    {
        console.log(table_status);
    }    

function toggle(source) 
{ 
    
            let checkboxes = document.querySelectorAll('input[type="checkbox"]'); 
            for (let i = 0; i < checkboxes.length; i++) 
            { 
                if (checkboxes[i] != source) 
                    checkboxes[i].checked = source.checked; 
            } 
}    

function test_checkbox()
{
    alert("Zorro ...");

    console.log(" Au total : " + document.querySelectorAll('input[type="checkbox"]').length);

    let checkboxes = document.querySelectorAll('input[type="checkbox"]'); 

    console.log(checkboxes);

    for(var i=0, n=checkboxes.length;i<n;i++)
    {
        //checkboxes[i].checked = source.checked;
        if (checkboxes[i].checked == true)
        {
            console.log( checkboxes[i] + " OK " );
        }
        else
        {
            console.log( checkboxes[i] + " No " );   
        }

    }

    const checked = document.querySelectorAll('input[type="checkbox"]:checked')
    let selected = [];
    selected = Array.from(checked).map(x => x.value)

    console.log(selected);

    var item = document.getElementById("ck1");
    if (item.checked == true)
    {
        console.log(" +++++ " + document.getElementById("ck1").value);
    }    
/*
    checkboxes = document.getElementsByName('foo');
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked;
  }
  */
}



</script>    

<table id="dataTable">
    <tr style="background-color:#000; color:#fff;" onclick="highlight(this)"><td>Data1</td><td>Data2</td></tr>
    <tr onclick="highlight(this)"><td>Data1</td><td>Data2</td></tr>
    <tr onclick="highlight(this)"><td>Data1</td><td>Data2</td></tr>
    <tr onclick="highlight(this)"><td>Data1</td><td>Data2</td></tr>
    <tr onclick="highlight(this)"><td>Data1</td><td>Data2</td></tr>
  </table>

  <input type="button" id="Btn" onclick="myFunction()" value="click">

  

  <script>

    let objet_table = document.getElementById('dataTable');
    let nb_rows = objet_table.rows.length;

    console.log(" NB rows " + nb_rows );


    let table_status = new Array(5);


    for (let i = 0; i < table_status.length; i++) 
    {
        table_status[i] = "unselected";
    }
    
    console.log(table_status);
/*
    function myFunction()
    {
        console.log(table_status);
    }    
*/

  </script>

<table style="width:100%;text-align:left;background-color:yellow;">
    <thead>
    <th>S.No</th>
    <th>Name</th>
    <th>Date of Birth</th>
    <th>Profile</th>
    <th>Salary</th>
    </thead>
    <tbody>
    <tr>
    <td>1</td><td>Jeff Smith</td>
    <td>35</td>
    <td>Assistant Manager</td>
    <td>120,000</td>
    </tr>
    <tr>
    <td>2</td>
    <td>Maria Garcia</td>
    <td>42</td>
    <td>Department Head</td>
    <td>85,000</td>
    </tr>
    <tr>
    <td>3</td>
    <td>David Rodriguez</td>
    <td>37</td>
    <td>Senior Sales Executive</td>
    <td>45,000</td>
    </tr>
    <tr>
    <td>4</td>
    <td>Eyon Shih</td>
    <td>32</td>
    <td>Sales Executive</td>
    <td>35,000</td>
    </tr>
    </tbody>
    </table>

<br>
<br>
<br>


    <table class="hoverTable">

        <tr> 
            <th><input type="checkbox" onclick="toggle(this);"></th> 
            <th>Name</th> 
            <th>Email</th> 
        </tr> 

        <tr>
            <td class="checkbox" ><input type="checkbox" id="ck1" value = "un" onclick="abc()" ></td>
            <td>Text 1B</td>
            <td>Text 1C</td>
        </tr>
        <tr>
            <td class="checkbox" ><input type="checkbox" id="ck2" value = "deux" ></td>
            <td>Text 2B</td>
            <td>Text 2C</td>
        </tr>
        <tr>
            <td class="checkbox" ><input type="checkbox" id="ck3" value = "trois" ></td>
            <td>Text 3B</td>
            <td>Text 3C</td>
        </tr>
    </table>

    <input type="button" id="btn_selection" onclick="test_checkbox()" value="Validation">

    <script>

function abc()
{
   //console.log("element");
   alert("zoulou");
}


    </script>