Как напечатать таблицу, созданную на JavaScript, с данными, отфильтрованными по флажкам, без использования jQuery? - PullRequest
0 голосов
/ 23 марта 2019

У меня есть таблица, отображающая некоторые данные, сделанные только в JavaScript.Теперь я поставил несколько флажков, чтобы отфильтровать данные и показать таблицу с выбранными ранее совпадениями.Без использования jQuery и без «скрытия» невыбранных строк мне нужно создавать новую таблицу каждый раз, когда установлен флажок.

Это HTML

<div>
  <form action="/action_page.php">
    <input type="checkbox" name="sParty" value="democrat"> Democrat
    <input type="checkbox" name="sParty" value="republican"> Republican
    <input type="checkbox" name="sParty" value="independent" checked> Independent
    <input type="submit" value="Submit">
  </form>
</div>
<div class="row" id="tablerow">
  <div class="col">
    <table class="table table-hover table-sm" id="sendata">
    </table>
  </div>
</div>

И это JS (я начал с получения NodeList из флажков)

var memberArr=data.results[0].members;  //BRINGS DATA FROM JSON FILA
var newArr = [];

for (var i = 0; i < memberArr.length; i++) {
  var obj = new Object; 
  obj.fullName= memberArr[i].first_name + " " + (memberArr[i].middle_name || " ") +  " " + memberArr[i].last_name;                  
  obj.party = memberArr[i].party;
  obj.state = memberArr[i].state;
  obj.seniority = memberArr[i].seniority;
  obj.votes_with_party_pct=memberArr[i].votes_with_party_pct + "  %" ;
  obj.nameLink=memberArr[i].url;
  newArr.push(obj);                             
} //newArr is the array with all members(objects)

var checkedBoxes = 
      document.querySelectorAll('input[name=mycheckboxes]:checked');  //GET 
VALUE OF CHECKED CHECKBOXES

var headersSenate={
  HfullName:"Full Name",
  Party:"Party Affilication",
  State:"State",
  Senior:"Seniority",
  Votes:"Votes w/Party (pct)",
}

var datos="<tr><th>" + headersSenate.HfullName + "</th><th>"+ headersSenate.Party + "</th><th>" + headersSenate.State+ "</th><th>"
            +headersSenate.Senior+ "</th><th>"+headersSenate.Votes+"</th>";

for(var i=0; i<newArr.length; i++){
  datos+="<tr><td><a target='_blank' href=" + newArr[i].nameLink + ">"+ newArr[i].fullName + "</a></td><td>" + newArr[i].party
  + "</td><td>" + newArr[i].state + "</td><td>" + newArr[i].seniority + "</td><td>" + newArr[i].votes_with_party_pct + "</td>";
}
document.getElementById("sendata").innerHTML= datos;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...