Masz kolumnę stołową, staram się rozszerzyć i ukryć:

JQUERY wydaje się ukryć elementy td, gdy wybrałem go przez klasa ale nie Przez Element's Nazwa.

Na przykład dlaczego:

$(".bold").hide(); // selecting by class works
$("tcol1").hide(); // select by element name does not work

Zwróć uwagę na poniższy HTML, druga kolumna ma taką samą nazwę dla wszystkich wierszy. Jak mogę utworzyć tę kolekcję za pomocą atrybutu name?

<tr>    
    <td>data1</td>
    <td name="tcol1" class="bold"> data2</td>
</tr>
<tr>    
    <td>data1</td>
    <td name="tcol1" class="bold"> data2</td>
</tr>  
<tr>    
    <td>data1</td>
    <td name="tcol1" class="bold"> data2</td>
</tr>
1414
T.T.T. 10 lipiec 2009, 05:05

10 odpowiedzi

Najlepsza odpowiedź

Możesz użyć selektor atrybutu jQuery:

$('td[name ="tcol1"]')   // matches exactly 'tcol1'
$('td[name^="tcol"]' )   // matches those that begin with 'tcol'
$('td[name$="tcol"]' )   // matches those that end with 'tcol'
$('td[name*="tcol"]' )   // matches those that contain 'tcol'
2317
zx485 1 październik 2019, 22:08

Każdy atrybut można wybrać za pomocą sposobu [attribute_name=value]. Zobacz próbkę Oto:

var value = $("[name='nameofobject']");
255
matpie 23 grudzień 2014, 18:57

Możesz dostać tablicę elementów po nazwie starym stylu i przekazać tę tablicę do jQuery.

function toggleByName() {
  var arrChkBox = document.getElementsByName("chName");
  $(arrChkBox).toggle();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
    <title>sandBox</title>
  </head>
  <body>
    <input type="radio" name="chName"/><br />
    <input type="radio" name="chName"/><br />
    <input type="radio" name="chName"/><br />
    <input type="radio" name="chName"/><br />
    <input type="button" onclick="toggleByName();" value="toggle"/>
  </body>
</html>

Uwaga: Jedyny czas, dla którego miałbyś być przyczynę użycia atrybutu "Nazwa", powinien być do pola wyboru lub wejść radiowych.

Lub możesz po prostu dodać inną klasę do elementów do wyboru. (Właśnie to zrobiłbym)

function toggleByClass(bolShow) {
  if (bolShow) {
    $(".rowToToggle").show();
  } else {
    $(".rowToToggle").hide();
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
    <title>sandBox</title>
  </head>
  <body>
    <table>
      <tr>
        <td>data1</td>
        <td class="bold rowToToggle">data2</td>
      </tr>
      <tr>
        <td>data1</td>
        <td class="bold rowToToggle">data2</td>
      </tr>
      <tr>
        <td>data1</td>
        <td class="bold rowToToggle">data2</td>
      </tr>
    </table>
    <input type="button" onclick="toggleByClass(true);" value="show"/>
    <input type="button" onclick="toggleByClass(false);" value="hide"/>
  </body>
</html>
26
Al Foиce ѫ 7 sierpień 2016, 19:52

Możesz uzyskać wartość nazwy z pola wejściowego za pomocą elementu nazw w jQuery przez:

var firstname = jQuery("#form1 input[name=firstname]").val(); //Returns ABCD
var lastname = jQuery("#form1 input[name=lastname]").val(); //Returns XYZ 
console.log(firstname);
console.log(lastname);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" id="form1">
  <input type="text" name="firstname" value="ABCD"/>
  <input type="text" name="lastname" value="XYZ"/>
</form>
25
Al Foиce ѫ 7 sierpień 2016, 20:08

Frameworks zwykle używają nazw Nazwy wsporników w formach, takich jak:

<input name=user[first_name] />

Mogą być dostępny przez:

// in JS:
this.querySelectorAll('[name="user[first_name]"]')

// in jQuery:
$('[name="user[first_name]"]')

// or by mask with escaped quotes:
this.querySelectorAll("[name*=\"[first_name]\"]")
17
itsnikolay 16 październik 2015, 16:32

Zapomniałeś drugiego zestawu cytatów, co sprawia, że zaakceptowana odpowiedź:

$('td[name="tcol1"]') 
6
Chris J 20 listopad 2017, 19:27

Możesz uzyskać element w jQuery, używając swojego atrybutu ID:

$("#tcol1").hide();
5
CalebHC 10 lipiec 2009, 01:09

Możesz użyć dowolnego atrybutu jako selektora z [attribute_name=value].

$('td[name=tcol1]').hide();
3
user6139189user6139189 31 marzec 2016, 12:51

Osobiście, co zrobiłem w przeszłości, to dawać im wspólny identyfikator klasy i użył, aby je wybrać. Może nie być idealny, ponieważ mają określoną klasę, która może nie istnieć, ale sprawia, że wybór jest ciekawy o wiele łatwiejszy. Wystarczy upewnić się, że jesteś wyjątkowy w swoich nazwach przycisków.

Tj. Dla powyższego przykładu używam wyboru według klasy. Lepiej nadal byłoby zmianę nazwy klasy od pogrubionej do "TCC1", więc nie otrzymasz przypadkowych wtrąceń do wyników jQuery. Jeśli odważnie odnosi się do klasy CSS, zawsze możesz określić zarówno w nieruchomości w klasie - tj. "Klasa =" TCC1 Bold "'.

Podsumowując, jeśli nie możesz wybrać według nazwy, użyj skomplikowanego selektora jQuery i zaakceptuj jakiekolwiek związane z ds. Wydajności lub użyj selektorów klasy.

Zawsze możesz ograniczyć zakres jQuery, w tym nazwa tabeli I.E. $ ('#-tleid> .bold')

Które powinno ograniczyć jQuery przed przeszukiwaniem "świata".

Wciąż może być klasyfikowany jako skomplikowany selektor, ale szybko ogranicza poszukiwanie w tabeli z identyfikatorem "#tableid", więc utrzymuje przetwarzanie do minimum.

Alternatywę tego, jeśli szukasz więcej niż 1 elementu wewnątrz # Tabela1, byłoby spojrzenie na osobno, a następnie przekazać je jquery, ponieważ ogranicza to zakres, ale oszczędza trochę przetwarzania, aby spojrzeć za każdym razem.

var tbl = $('#tableID');
var boldElements = $('.bold',tbl);
var rows = $('tr',tbl);
if (rows.length) {
   var row1 = rows[0]; 
   var firstRowCells = $('td',row1); 
}
2
HoldOffHunger 27 czerwiec 2018, 18:01

Oto proste rozwiązanie: $('td[name=tcol1]')

5
Barry Michael Doyle 27 kwiecień 2016, 19:26