Доступ к содержимому ячейки таблицы в Javascript

#javascript #html

#javascript #HTML

Вопрос:

У меня есть флажок, вложенный в элемент ячейки таблицы в HTML. Как я могу получить доступ к внутреннему флажку из Javascript? Все примеры, которые я видел, изменяют сам внутренний HTML или визуальные свойства, что меня не интересует. Я пробовал массив childNodes, но, по-видимому, он пуст.

Ответ №1:

Если вы не используете jQuery, то вы могли бы сделать:

 document.getElementsByTagName('input');
  

А затем циклически просматриваем их, чтобы найти ту, которая является checkbox, а parentNode — ячейкой таблицы.

Или очень просто добавьте идентификатор к этому флажку.

Ответ №2:

если вы используете jquery, это очень просто;

 $('table td input:checkbox')
  

Обновить

без jquery.

 <table id='table'>
  ...
  <td><input name='input' type='checkbox' /></td>

</table>


var table = document.getElementById('table');

var inputs = table.getElementsByTagName('input')

var chkbox = [];

for (var i=0; i< inputs.length;i  ) {
   if (inputs[i].type == 'checkbox') {
      chkbox.push(inputs[i]);
   }

}
  

теперь все ваши флажки находятся внутри массива chkbox

если вы хотите получить доступ из формы, это также легко:

 var ckbox = document.formname.checkboxname;
  

Комментарии:

1. Моя строка jQuery была такой: $('#table td input:checkbox') — обратите внимание на начальный знак хэша.

Ответ №3:

Вы можете использовать идентификатор…

Демонстрация:http://jsfiddle.net/YTDeW/1 /

 document.getElementById('ck1').value;
  

 <table>
    <tr>
        <td>checkbox 1<input type="checkbox" id="ck1" name="ck" value="check1" /></td>
        <td>checkbox 2<input type="checkbox" id="ck2" name="ck" value="check2" /></td>
        <td>checkbox 3<input type="checkbox" id="ck3" name="ck" value="check3" /></td>
    </tr>
</table>
  

или вы можете получить все, которые имеют один и тот же name атрибут…

 var y = document.getElementsByName('ck');
for (var i = 0; i < y.length; i  ) {
    document.getElementById('trace').innerHTML  = "<br />"   y[i].value;
}
  

Ответ №4:

Если ваши входные данные представлены в форме, то вы можете полностью игнорировать таблицу для целей доступа:

 <form name="aForm" ...>
  // Whatever table structure you like

  <input name="anInput" ...>

</form>
  

Вы можете получить доступ к входным данным как:

 var inp = document.aForm.anInput;
  

или более формально как:

 var inp = document.forms['aForm'].elements['anInput'];
  

обратите внимание, что если у вас есть более одного элемента управления формой в этой форме с именем anInput, inp это будет коллекция этих элементов.