Tiny File Manager

Back Back Up Advanced Editor

<!--

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
-->

<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>

//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>

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>

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

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

</script>