get column position (like first, second, etc.)-CodePudding

when I click on an icon, it will change but I want to know in which column is clicked icon (like the first one or the second one or the third one, etc.)

$(".fa-caret-down").click(function(){
    if($(this).is(".fa-caret-down")){
        $(this).removeClass("fa-caret-down").addClass("fa-caret-up");
        //console.log() - in which column it was changed
    }else{
        $(this).removeClass("fa-caret-up").addClass("fa-caret-down");
        //console.log() - in which column it was changed
    }
});

<table style="width:100%">
    <thead>
        <tr>
            <th>#<i class="fas fa-caret-down ml-2" style="cursor: pointer;"></i></th>
            <th>Name<i class="fas fa-caret-down ml-2" style="cursor: pointer;"></i></th>
            <th>Price<i class="fas fa-caret-down ml-2" style="cursor: pointer;"></i></th>
            <th>1h %<i class="fas fa-caret-down ml-2" style="cursor: pointer;"></i></th>
            <th>24h %<i class="fas fa-caret-down ml-2" style="cursor: pointer;"></i></th>
            <th>Timestamp<i class="fas fa-caret-down ml-2 align" style="cursor: pointer;"></i></th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

CodePudding user response：

jQuery index function will return the index of the element.

$(".fa-caret-down").click(function(){
    console.log($(this).parent().index()) //- in which column it was changed
    if($(this).is(".fa-caret-down")){
        $(this).removeClass("fa-caret-down").addClass("fa-caret-up");
    }else{
        $(this).removeClass("fa-caret-up").addClass("fa-caret-down");
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<table style="width:100%">
    <thead>
        <tr>
            <th>#<i class="fas fa-caret-down ml-2" style="cursor: pointer;"></i></th>
            <th>Name<i class="fas fa-caret-down ml-2" style="cursor: pointer;"></i></th>
            <th>Price<i class="fas fa-caret-down ml-2" style="cursor: pointer;"></i></th>
            <th>1h %<i class="fas fa-caret-down ml-2" style="cursor: pointer;"></i></th>
            <th>24h %<i class="fas fa-caret-down ml-2" style="cursor: pointer;"></i></th>
            <th>Timestamp<i class="fas fa-caret-down ml-2 align" style="cursor: pointer;"></i></th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

CodePudding user response：

You can use plain javascript to get it, let me show below:

$(".fa-caret-down").click(function(event){
    console.log(event.target.parentElement.cellIndex)
    if($(this).is(".fa-caret-down")){
        $(this).removeClass("fa-caret-down").addClass("fa-caret-up");
    }else{
        $(this).removeClass("fa-caret-up").addClass("fa-caret-down");
    }
});

Pass the event as parameter into click function:
Using this element get the current element using target, aftet get its parent node using parentElement because the event is triggered clicking on <i><i/> element and it's inside a th, and finally get the cell index using cellIndex
You don't need a console.log inside if and else, you need only when the event id triggered

CodePudding user response：

simply use event delegation and classList.replace() method
(and it is more clear with css)

Each TD or TH element have a cellIndex property

document.querySelector('table thead').onclick = e =>
  {
  if (!e.target.matches('i.fas')) return   // ignore clicks from elsewhere

  let eTH    = e.target.closest('th')
    , onDown = e.target.classList.contains('fa-caret-down')
    ;
  console.clear()
  console.log( 'column :', eTH.cellIndex, eTH.innerText, onDown?'UP':'DOWN'  ),
  setTimeout(console.clear,3000)

  if (onDown) e.target.classList.replace('fa-caret-down','fa-caret-up')
  else        e.target.classList.replace('fa-caret-up','fa-caret-down')
  }

table {
  width: 100%;
}
table thead th i.fas {
  cursor : pointer;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" >

<table >
  <thead>
    <tr>
      <th>#<i class="fas fa-caret-down ml-2" ></i></th>
      <th>Name<i class="fas fa-caret-down ml-2" ></i></th>
      <th>Price<i class="fas fa-caret-down ml-2" ></i></th>
      <th>1h %<i class="fas fa-caret-down ml-2" ></i></th>
      <th>24h %<i class="fas fa-caret-down ml-2" ></i></th>
      <th>Timestamp<i class="fas fa-caret-down ml-2 align" ></i></th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

but IMHO it would be cooler if the whole column header is used to invert the graph

document.querySelector('table thead').onclick = ({target}) =>
  {
  if (!target.matches('table thead th, table thead th i.fas')) return  // ignore clicks from elsewhere

  let eIfas  = target.querySelector('i.fas')
    , eTH    = target.closest('th')
    , onDown = eIfas.classList.contains('fa-caret-down')
    ;
  console.clear()
  console.log( 'column :', eTH.cellIndex, ':',eTH.innerText, onDown?'UP':'DOWN'  )
  setTimeout(console.clear,5000)

  if (onDown)  eIfas.classList.replace('fa-caret-down','fa-caret-up')
  else         eIfas.classList.replace('fa-caret-up','fa-caret-down')
  }

table {
  width: 100%;
}
table thead th {
  cursor : pointer;
}
table thead th:hover {
  background-color: lightgoldenrodyellow;
}
table thead th:hover i.fas {
  color: crimson;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" >

<table >
  <thead>
    <tr>
      <th># <i class="fas fa-caret-down ml-2" ></i></th>
      <th>Name <i class="fas fa-caret-down ml-2" ></i></th>
      <th>Price <i class="fas fa-caret-down ml-2" ></i></th>
      <th>1h % <i class="fas fa-caret-down ml-2" ></i></th>
      <th>24h % <i class="fas fa-caret-down ml-2" ></i></th>
      <th>Timestamp <i class="fas fa-caret-down ml-2 align" ></i></th>
    </tr>
  </thead>
  <tbody></tbody>
</table>