jQuery: select all `<td>` of a `<tr>` except a particular `<td>`

Question

I want to select all td of the clicked tr except the td that has input check box. The following code allows me to not select the td that has input field:

$(".table-row td:not(:has(input))").click(function(){...}

But I couldn't access the value of the other td .

What cause the problem? How can I select all td except a particular td ?

.html

<tr data-id="{{ test.id }}" class="table-row">
 <td class="form-check">
  <div class="form-check">
   <label class="form-check-label">
    <input class="form-check-input check-ele check-prevent" type="checkbox" value="">
    <span class="form-check-sign">
     <span class="check"></span>
    </span>
   </label>
  </div>
 </td>
 <td>{{ forloop.counter }}</td>
 <td name="test_name">{{ test.test_name}}</td>
 <td name="test_type">{{ test.test_type}}</td>
 <td name="test_date">{{ test.test_date|date:"m/d/Y" }}</td>  
</tr>  

jQuery

$(".table-row td:not(:has(input))").click(function(){
  $('#editModal').modal('show');
  let row = $(this).closest('tr').attr('data-id');
  var test_name = $(this).find('td[ name="test_name" ]').text();
  console.log(typeof(test_name));
  // return empty test_name. The row I click on has test_name with value `Entrance Exam`
  var test_type = $(this).find('td[ name="test_type" ]').text();
  var test_date = $(this).find('td[ name="test_date" ]').text();
  var date = new Date(test_date);
  var day = ("0" + date.getDate()).slice(-2);
  var month = ("0" + (date.getMonth() + 1)).slice(-2);
  var test_date = date.getFullYear()+"-"+(month)+"-"+(day) ;
  $('#edit_test_date').val(test_date);
  $("#edit_test_name").val(test_name);
  $("#edit_test_type").val(test_type);

Answer 1

You selector is working fine, as you can see in the following example, but you are accessing the values of the other <td> s incorrectly. Here's another way to do it:

 const cells = $(".table-row td:not(:has(input))"); cells.click((e) => { const row = e.target.parentElement; const [ name, type, date ] = Array.from(row.children).slice(2).map(cell => cell.getAttribute('name')); console.log(`NAME = ${ name }, TYPE = ${ type }, DATE = ${ date }`) }); 

 table { border-collapse: collapse; border: 3px solid black; width: 100%; text-align: center; font-family: monospace; } td { padding: 10px 20px; } td:not(:first-child) { cursor: pointer; border-left: 3px solid black; } td:not(:first-child):hover { background: yellow; } .as-console-wrapper { max-height: 44px !important; } 

 <table> <tr class="table-row"> <td> <div> <label> <input type="checkbox" value=""> </label> </div> </td> <td name="counter1">Counter 1</td> <td name="name1">Name 1</td> <td name="type1">Type 1</td> <td name="date1">Date 1</td> </tr> <tr class="table-row"> <td> <div> <label> <input type="checkbox" value=""> </label> </div> </td> <td name="counter2">Counter 2</td> <td name="name2">Name 2</td> <td name="type2">Type 2</td> <td name="date2">Date 2</td> </tr> <tr class="table-row"> <td> <div> <label> <input type="checkbox" value=""> </label> </div> </td> <td name="counter3">Counter 3</td> <td name="name3">Name 3</td> <td name="type3">Type 3</td> <td name="date3">Date 3</td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

The problem in your code is here:

let row = $(this).closest('tr').attr('data-id');
var test_name = $(this).find('td[ name="test_name" ]').text();

You should be selecting the actual row ( <tr> ) instead of its data-id attribute, and then use that row to find the different cells and the value of their name attributes:

const row = $(this).closest('tr');
const test_name = row.find('td[name="name1"]').text();