hello there I have an HTML table which I want to exclude a specific td from it and i dont know how.
HTML :

 <table id="datatable-responsive" 
                           cellspacing="0" width="100%">
                        <thead>
                        <tr>
                            <th>row</th>
                            <th>title</th>
                            <th>User</th>
                            <th> Type </th>
                            <th> date</th>
                            <th>func</th>
                        </tr>
                        </thead>
                        <tbody>                            
                            {% for item in knowledges %}
                                <tr>
                                    <td>{{ forloop.counter }}</td>
                                    <td>{{item.KnowledgeTitle}}</td>
                                    <td>{{ item.CreatorUserID.get_full_name }}</td>
                                    <td>                             
                                        {% if item.Type == 1 %}
                                         Show Something...
                                        {% endif %}               
                                    </td>
                                    <td id="{{ item.CreateDate }}{{ forloop.counter }}"></td>
                                    <td id="excluded">
                                        <a  href="/KnowledgeView/{{ item.KnowledgeCode }}"><i
                                            >Show</i> </a>
                                        <button title="show" type="button" onclick="getClickID(this.id)" id="{{item.KnowledgeCode}}"  data-toggle="modal" data-target="#exampleModalLong" >Click</button>                                       
                                    </td>
                                </tr>
                            {% endfor %}

So basicly i want to exclude the second td <td>{{item.KnowledgeTitle}}</td> which is Title.

function htmlToCSV(html, filename) {
    var data = [];
    var rows = document.querySelectorAll("table tr");
            
    for (var i = 0; i < rows.length; i  ) {
        var row = [], cols = rows[i].querySelectorAll("td, th");
                
        for (var j = 0; j < cols.length; j  ) {
                row.push(cols[j].innerText);
        }
                
        data.push(row.join(","));       
    }

    downloadCSVFile(data.join("\n"), filename);

Please dont get confused with some Django-template-tags

CodePudding user response：

Just add an identifier to the element you don't want to select then select like this querySelectorAll("td:not(.excluded-class)");

CodePudding user response：

To do what you require you can place a class on the cells to be excluded and then target them with :not() in your querySelectorAll() selector.

Also note that your code can be made more succinct by using map(). Try this:

function htmlToCSV(html, filename) {
  var rows = document.querySelectorAll("table tr");
  let csv = Array.from(rows).map(row => {
    return Array.from(row.querySelectorAll('td:not(.export-exclude), th:not(.export-exclude)')).map(cell => cell.innerText).join(',');
  });
  console.log(csv);
  
  //downloadCSVFile(data.join("\n"), filename);
}

htmlToCSV();

<table id="datatable-responsive"  cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>row</th>
      <th >title</th>
      <th>User</th>
      <th> Type </th>
      <th> date</th>
      <th>func</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td >item.KnowledgeTitle 1</td>
      <td>item.CreatorUserID.get_full_name 1</td>
      <td>
        Show Something 1...
      </td>
      <td id=""></td>
      <td id="excluded">
        <a  href="/KnowledgeView/{{ item.KnowledgeCode }}">
          <i >Show</i>
        </a>
        <button title="show" type="button" onclick="getClickID(this.id)" id="{{item.KnowledgeCode}}"  data-toggle="modal" data-target="#exampleModalLong">Click</button>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td >item.KnowledgeTitle 2</td>
      <td>item.CreatorUserID.get_full_name 2</td>
      <td>
        Show Something 2...
      </td>
      <td id=""></td>
      <td id="excluded">
        <a  href="/KnowledgeView/{{ item.KnowledgeCode }}">
          <i >Show</i>
        </a>
        <button title="show" type="button" onclick="getClickID(this.id)" id="{{item.KnowledgeCode}}"  data-toggle="modal" data-target="#exampleModalLong">Click</button>
      </td>
    </tr>
  </tbody>
</table>

Finally, the html argument of your function does nothing and can be removed.

CodePudding user response：

exclude td and th from the table using querySelectorAll("td:not(.excluded-class),th:not(.excluded-class)");

CodePudding user response：

You can modify your function to exclude (not to include in your data.row) like this:

htmlToCSV(html, filename) {
    var data = [];
    var rows = document.querySelectorAll("table tr");

    for (var i = 0; i < rows.length; i  ) {
        var row = [], cols = rows[i].querySelectorAll("td, th");

        for (var j = 0; j < cols.length; j  ) {
            if (j != 1) {
                row.push(cols[j].innerText);
            }
        }
    }

    data.push(row.join(","));
}