Флажок таблицы thead цвета флажок / снимите флажок - PullRequest
Новая
       9

Флажок таблицы thead цвета флажок / снимите флажок

0 голосов
/ 24 мая 2018

У меня есть короткий вопрос о флажке все с таблицей.Я не хочу менять цвет в первую очередь, как удалить цвет из заголовка?

Я вставляю код и использую только Javascript pure. 

function allpart(chk){
    var parent = chk.parentNode.parentNode;
    var checkboxes = document.getElementsByTagName('input');
    var chkpart = document.getElementById('idpart');
    if(chk.checked){
        for(var i=0;i<checkboxes.length;i++){
            if(checkboxes[i].type == 'checkbox'){
                checkboxes[i].checked = true;
                checkboxes[i].parentNode.parentNode.style.background = "#CC0000";
                checkboxes[i].parentNode.parentNode.style.color = "#FFF";
            }
        }
    }else{
        for(var i=0;i<checkboxes.length;i++){
            if(checkboxes[i].type == 'checkbox'){
                checkboxes[i].checked = false;
                checkboxes[i].parentNode.parentNode.style.background = "";
                checkboxes[i].parentNode.parentNode.style.color = "";   
            }
        }
    }

Через html 

<table align="center" width="540px" class="tbcuadro">
<thead>
	<tr>
	<th width="5%"><input name="idpart[]" id="idpart" type="checkbox" onclick="allpart(this);"></th>
	<th width="75%" align="center">NAME</th>
	<th width="20%" align="center">NUMBER</th>
	</tr>
</thead>
<tbody>
 <tr>
    <td width="5%"><input name="idpart" type='checkbox'></td>
    <td width="75%">row 1</td>
    <td width="20%">row 2</td>    
  </tr>
 <tr>
    <td width="5%"><input name="idpart" type='checkbox'></td>
    <td width="75%">row 1</td>
    <td width="20%">row 2</td>    
  </tr>
 <tr>
    <td width="5%"><input name="idpart" type='checkbox'></td>
    <td width="75%">row 1</td>
    <td width="20%">row 2</td>    
  </tr>
</tbody>
</table>

Ответы [ 3 ]

0 голосов
/ 24 мая 2018

Если вы хотите удалить цвет из заголовка, не пишите: 

checkboxes[i].parentNode.parentNode.style.background = "";

пишите просто: 

checkboxes[i].parentNode.parentNode.style.background = "transparent";
0 голосов
/ 24 мая 2018

Эта часть кода удалит color и background всех th с. 

var th = document.getElementsByTagName('th');
  for (var i = 0; i < th.length; i++) {
  th[i].style.color = "black";
  th[i].style.background = "white";
}

Также эта часть кода, на мой взгляд, неверна.Я изменяю начальный индекс с 2 на 0 

for (var i = 0; i < checkboxes.length; i++) {
  if (checkboxes[i].type == "checkbox") {
    checkboxes[i].checked = false;
    checkboxes[i].parentNode.parentNode.style.background = "";
    checkboxes[i].parentNode.parentNode.style.color = "";
  }
}

Надеюсь, это поможет вам 

function allpart(chk) {
  var parent = chk.parentNode.parentNode;
  var checkboxes = document.getElementsByTagName("input");
  var chkpart = document.getElementById("idpart");
  if (chk.checked) {
    for (var i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].type == "checkbox") {
        checkboxes[i].checked = true;
        checkboxes[i].parentNode.parentNode.style.background = "#CC0000";
        checkboxes[i].parentNode.parentNode.style.color = "#FFF";
      }
    }
  } else {
    for (var i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].type == "checkbox") {
        checkboxes[i].checked = false;
        checkboxes[i].parentNode.parentNode.style.background = "";
        checkboxes[i].parentNode.parentNode.style.color = "";
      }
    }
  }
  var th = document.getElementsByTagName('th');
  for (var i = 0; i < th.length; i++) {
    th[i].style.color = "black";
    th[i].style.background = "white";
  }
}
<table align="center" width="540px" class="tbcuadro">
  <thead>
    <tr>
      <th width="5%"><input name="idpart[]" id="idpart" type="checkbox" onclick="allpart(this)"></th>
      <th width="75%" align="center">NAME</th>
      <th width="20%" align="center">NUMBER</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td width="5%"><input name="idpart" type='checkbox'></td>
      <td width="75%">row 1</td>
      <td width="20%">row 2</td>
    </tr>
    <tr>
      <td width="5%"><input name="idpart" type='checkbox'></td>
      <td width="75%">row 1</td>
      <td width="20%">row 2</td>
    </tr>
    <tr>
      <td width="5%"><input name="idpart" type='checkbox'></td>
      <td width="75%">row 1</td>
      <td width="20%">row 2</td>
    </tr>
  </tbody>
</table>
0 голосов
/ 24 мая 2018

Используйте условное основание на thead или tbody, чтобы установить цвет.например, если checkboxes[i].parent("tbody").is("tbody"), тогда установите цвет.

...