jQuery:特定の `<td>`以外の `<tr>`の全ての `<td>`を選択

入力チェックボックスがある td を除く、クリックした tr のすべての td を選択します。次のコードでは、入力フィールドがある td を選択できません。

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

しかし、他の td の値にアクセスできませんでした。

何が問題の原因ですか?特定の td を除くすべての td を選択するにはどうすればよいですか。

.html

<tr data-id="{{ test.id }}" class="table-row">
 <td class="form-check">
  <div class="form-check">
   
  </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);
0
"しかし、他のtdの値にアクセスできませんでした。" 他のtdsの値をどのように取得しようとしましたか?ここに示したjs行はクリックハンドラを設定しているだけで、tdのコンテンツにアクセスすることとは無関係です。
追加された 著者 Patrick Evans,
私はあなたのコードを見て私はあなたがそれが入力を持っている場合にのみ form-check クラスを使ったと思う。これはあなたが探しているものですか?
追加された 著者 Manjunath,
私はあなたのコードを見て私はあなたがそれが入力を持っている場合にのみ form-check クラスを使ったと思う。これはあなたが探しているものですか?
追加された 著者 Manjunath,
私はあなたのコードを見て私はあなたがそれが入力を持っている場合にのみ form-check クラスを使ったと思う。これはあなたが探しているものですか?
追加された 著者 Manjunath,
私はあなたのコードを見て私はあなたがそれが入力を持っている場合にのみ form-check クラスを使ったと思う。これはあなたが探しているものですか?
追加された 著者 Manjunath,
row要素内で find() siblings()に変更するか find()を使用します。あなたは他の<td> this の子として探していますが、それが構造ではありません
追加された 著者 charlietfl,
td にinput要素があり、インデックスが0で、クラスが .form-check /の場合は、何もしません
追加された 著者 Andreas,
@Manjunathそれは私がやりたいことではありません。あなたの提案をありがとう
追加された 著者 Sokunthaneth,
@Manjunathそれは私がやりたいことではありません。あなたの提案をありがとう
追加された 著者 Sokunthaneth,
@Manjunathそれは私がやりたいことではありません。あなたの提案をありがとう
追加された 著者 Sokunthaneth,
@Manjunathそれは私がやりたいことではありません。あなたの提案をありがとう
追加された 著者 Sokunthaneth,
@charlietfl find()からsiblings()に変更しましたが、動作します。どうもありがとうございます
追加された 著者 Sokunthaneth,
@charlietfl find()からsiblings()に変更しましたが、動作します。どうもありがとうございます
追加された 著者 Sokunthaneth,
@charlietfl find()からsiblings()に変更しましたが、動作します。どうもありがとうございます
追加された 著者 Sokunthaneth,
@charlietfl find()からsiblings()に変更しましたが、動作します。どうもありがとうございます
追加された 著者 Sokunthaneth,
@PatrickEvans私は自分の投稿を詳細に更新しました。これをチェックしてください。感謝
追加された 著者 Sokunthaneth,

4 答え

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:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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

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();
2
追加された
はい、このコードは機能します。それが私が欲しいものです。ありがとうございました!
追加された 著者 Sokunthaneth,
私は自分の投稿を詳細に更新しました。他の<td> の値に誤ってアクセスしました。
追加された 著者 Sokunthaneth,
@Sokunthanethどうぞ、更新された答えを見てください。つまり、 <tr> .find()を呼び出す必要があります。
追加された 著者 Danziger,

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:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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

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();
2
追加された
はい、このコードは機能します。それが私が欲しいものです。ありがとうございました!
追加された 著者 Sokunthaneth,
私は自分の投稿を詳細に更新しました。他の<td> の値に誤ってアクセスしました。
追加された 著者 Sokunthaneth,
@Sokunthanethどうぞ、更新された答えを見てください。つまり、 <tr> .find()を呼び出す必要があります。
追加された 著者 Danziger,

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:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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

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();
2
追加された
はい、このコードは機能します。それが私が欲しいものです。ありがとうございました!
追加された 著者 Sokunthaneth,
私は自分の投稿を詳細に更新しました。他の<td> の値に誤ってアクセスしました。
追加された 著者 Sokunthaneth,
@Sokunthanethどうぞ、更新された答えを見てください。つまり、 <tr> .find()を呼び出す必要があります。
追加された 著者 Danziger,

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:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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

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();
2
追加された
はい、このコードは機能します。それが私が欲しいものです。ありがとうございました!
追加された 著者 Sokunthaneth,
私は自分の投稿を詳細に更新しました。他の<td> の値に誤ってアクセスしました。
追加された 著者 Sokunthaneth,
@Sokunthanethどうぞ、更新された答えを見てください。つまり、 <tr> .find()を呼び出す必要があります。
追加された 著者 Danziger,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript