Есть столбец таблицы, который я пытаюсь развернуть и скрыть:

Кажется, jQuery скрывает элементы td, когда я выбираю его с помощью класса, но не по имени элемента.

Например, почему:

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

Обратите внимание на HTML-код ниже, второй столбец имеет одинаковое имя для всех строк. Как я мог создать эту коллекцию с помощью атрибута 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>
1310
T.T.T. 10 Июл 2009 в 05:05

13 ответов

Лучший ответ

Вы можете использовать селектор атрибутов 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 Окт 2019 в 22:08

Любой атрибут может быть выбран способом [attribute_name=value]. См. Пример здесь:

var value = $("[name='nameofobject']");
255
matpie 23 Дек 2014 в 18:57

Если у вас есть что-то вроде:

<input type="checkbox" name="mycheckbox" value="11" checked="">
<input type="checkbox" name="mycheckbox" value="12">

Вы можете прочитать все так:

jQuery("input[name='mycheckbox']").each(function() {
    console.log( this.value + ":" + this.checked );
});

Фрагмент:

jQuery("input[name='mycheckbox']").each(function() {
  console.log( this.value + ":" + this.checked );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="mycheckbox" value="11" checked="">
<input type="checkbox" name="mycheckbox" value="12">
68
Al Foиce ѫ 7 Авг 2016 в 20:02

Вы могли получить массив элементов по имени старомодным способом и передать этот массив в 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>

Примечание: единственный раз, когда у вас будет причина использовать атрибут «имя», должен быть флажок или радиовходы.

Или вы можете просто добавить другой класс к элементам для выбора (это то, что я бы сделал)

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 Авг 2016 в 19:52

Вы можете получить значение имени из поля ввода, используя элемент name в jQuery:

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 Авг 2016 в 20:08

Каркасы обычно используют имена скобок в формах, например:

<input name=user[first_name] />

Они могут быть доступны по:

// 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 Окт 2015 в 16:32

Я сделал так, и это работает:

$('[name="tcol1"]')

https://api.jquery.com/attribute-equals-selector/

13
Paweł Tomkiel 25 Мар 2015 в 21:22

Вы забыли второй набор цитат, что делает принятый ответ неверным:

$('td[name="tcol1"]') 
6
Chris J 20 Ноя 2017 в 19:27

Вы можете получить элемент в JQuery, используя его атрибут ID следующим образом:

$("#tcol1").hide();
5
CalebHC 10 Июл 2009 в 01:09

Вы можете использовать любой атрибут в качестве селектора с [attribute_name=value].

$('td[name=tcol1]').hide();
3
user6139189user6139189 31 Мар 2016 в 12:51

Лично, что я сделал в прошлом, так это дал им общий идентификатор класса и использовал его, чтобы выбрать их. Это может быть не идеально, поскольку у них есть определенный класс, который может не существовать, но это делает выбор намного проще. Просто убедитесь, что вы уникальны в своих именах классов.

То есть для примера выше я бы использовал ваш выбор по классам. Еще лучше изменить имя класса с жирного на «tcol1», чтобы избежать случайных включений в результаты jQuery. Если жирный шрифт действительно ссылается на класс CSS, вы всегда можете указать оба в свойстве класса - то есть 'class = "tcol1 bold"'.

Таким образом, если вы не можете выбрать по имени, либо используйте сложный селектор jQuery и примите любое связанное с этим снижение производительности, либо используйте селекторы класса.

Вы всегда можете ограничить область действия jQuery, включив имя таблицы, т.е. $ ('# tableID> .bold')

Это должно ограничить поиск jQuery в «мире».

Его все еще можно классифицировать как сложный селектор, но он быстро ограничивает любой поиск внутри таблицы с идентификатором «#tableID», поэтому сводит обработку к минимуму.

Альтернативой этого, если вы ищете более 1 элемента в # table1, будет поиск этого отдельно, а затем передача его в jQuery, так как это ограничивает область действия, но экономит немного обработки, чтобы искать его каждый раз.

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 Июн 2018 в 18:01

Вы можете использовать функцию:

get.elementbyId();
-13
Mastisa 19 Июн 2019 в 07:44

Вот простое решение: $('td[name=tcol1]')

5
Barry Michael Doyle 27 Апр 2016 в 19:26