第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用javascript從表中刪除列

使用javascript從表中刪除列

紫衣仙女 2021-06-30 14:03:48
我需要html使用javascript. 該表是csv使用框架從文件自動創(chuàng)建的,因此我無法修改它(例如添加一個id等)。我設(shè)法通過添加到列標(biāo)題的鏈接來消除該列,然后單擊它消除了該列,但是我找不到在頁面加載時自動執(zhí)行此操作的方法。我是新手,javascript所以請嘗試為傻瓜解釋一下。function closestByTagName(el, tagName) {  while (el.tagName != tagName) {    el = el.parentNode;    if (!el) {      return null;    }  }  return el;}function delColumn(link) {  var idx = 2,      table = closestByTagName(link, "TABLE"),      rowCount = table.rows.length;  for (var i = 0; i < rowCount; i++) {    table.rows[i].deleteCell(idx);  }  return false;}window.onload = function() {  var th = document.querySelectorAll("th");  th[2].innerHTML += ' <a href="#" onclick="return delColumn(this)">X</a>';}<div class="table">  <table class="inline">    <tr class="row0">      <th class="col0">FullName</th>      <th class="col1">Country</th>      <th class="col2">Position</th>      <th class="col3">CellPhone</th>      <th class="col4">Email</th>    </tr>    <tr class="row1">      <td class="col0">magnus</td>      <td class="col1">Guatemala</td>      <td class="col2">Lacayo</td>      <td class="col3">22</td>      <td class="col4">magnus.gaylord@example.com</td>    </tr>    <tr class="row2">      <td class="col0">Phoebe Feest</td>      <td class="col1">Guatemala</td>      <td class="col2">Lacayo</td>      <td class="col3">23</td>      <td class="col4">ylittel@example.net</td>    </tr>    <tr class="row3">      <td class="col0">Prof. Tad Johnston</td>      <td class="col1">Guatemala</td>      <td class="col2">Lacayo</td>      <td class="col3">24</td>      <td class="col4">srau@example.org</td>    </tr>    <tr class="row4">      <td class="col0">Annabelle Ortiz</td>      <td class="col1">Guatemala</td>      <td class="col2">Lacayo</td>      <td class="col3">25</td>      <td class="col4">damore.walker@example.org</td>上面的代碼有效,但我必須按下x位置列上的 才能消除它,我需要它自動發(fā)生。換句話說,我不想使用代碼href="#" onclick="return delColumn(this)"而是讓它在加載時發(fā)生。
查看完整描述

2 回答

?
桃花長相依

TA貢獻(xiàn)1860條經(jīng)驗 獲得超8個贊

由于您的所有列都有一個特定的class,因此一種可能的解決方案ES6是使用:


document.querySelectorAll(".col2").forEach(col => col.remove());

或者使用標(biāo)準(zhǔn)方法:


var cols = document.querySelectorAll(".col2");


for (var i = 0; i < cols.length; i++)

{

    cols[i].remove();

}

例子:

window.onload = function()

{

    var cols = document.querySelectorAll(".col2");


    for (var i = 0; i < cols.length; i++)

    {

        cols[i].remove();

    }


    // Or with ES6:

    //document.querySelectorAll(".col2").forEach(col => col.remove());

}

<div class="table">

  <table class="inline">

    <tr class="row0">

      <th class="col0">FullName</th>

      <th class="col1">Country</th>

      <th class="col2">Position</th>

      <th class="col3">CellPhone</th>

      <th class="col4">Email</th>

    </tr>

    <tr class="row1">

      <td class="col0">magnus</td>

      <td class="col1">Guatemala</td>

      <td class="col2">Lacayo</td>

      <td class="col3">22</td>

      <td class="col4">magnus.gaylord@example.com</td>

    </tr>

    <tr class="row2">

      <td class="col0">Phoebe Feest</td>

      <td class="col1">Guatemala</td>

      <td class="col2">Lacayo</td>

      <td class="col3">23</td>

      <td class="col4">ylittel@example.net</td>

    </tr>

    <tr class="row3">

      <td class="col0">Prof. Tad Johnston</td>

      <td class="col1">Guatemala</td>

      <td class="col2">Lacayo</td>

      <td class="col3">24</td>

      <td class="col4">srau@example.org</td>

    </tr>

    <tr class="row4">

      <td class="col0">Annabelle Ortiz</td>

      <td class="col1">Guatemala</td>

      <td class="col2">Lacayo</td>

      <td class="col3">25</td>

      <td class="col4">damore.walker@example.org</td>

    </tr>

    <tr class="row5">

      <td class="col0">Mrs. Adella Schiller IV</td>

      <td class="col1">Guatemala</td>

      <td class="col2">Lacayo</td>

      <td class="col3">26</td>

      <td class="col4">jadyn.dibbert@example.com</td>

    </tr>

  </table>

</div>


查看完整回答
反對 回復(fù) 2021-07-01
?
慕神8447489

TA貢獻(xiàn)1780條經(jīng)驗 獲得超1個贊

Shidersz 的回答很好,但值得注意的是,您可以使用單個 CSS 規(guī)則而不是 JavaScript:


.col2 {

  display: none;

}

<div class="table">

  <table class="inline">

    <tr class="row0">

      <th class="col0">FullName</th>

      <th class="col1">Country</th>

      <th class="col2">Position</th>

      <th class="col3">CellPhone</th>

      <th class="col4">Email</th>

    </tr>

    <tr class="row1">

      <td class="col0">magnus</td>

      <td class="col1">Guatemala</td>

      <td class="col2">Lacayo</td>

      <td class="col3">22</td>

      <td class="col4">magnus.gaylord@example.com</td>

    </tr>

    <tr class="row2">

      <td class="col0">Phoebe Feest</td>

      <td class="col1">Guatemala</td>

      <td class="col2">Lacayo</td>

      <td class="col3">23</td>

      <td class="col4">ylittel@example.net</td>

    </tr>

    <tr class="row3">

      <td class="col0">Prof. Tad Johnston</td>

      <td class="col1">Guatemala</td>

      <td class="col2">Lacayo</td>

      <td class="col3">24</td>

      <td class="col4">srau@example.org</td>

    </tr>

    <tr class="row4">

      <td class="col0">Annabelle Ortiz</td>

      <td class="col1">Guatemala</td>

      <td class="col2">Lacayo</td>

      <td class="col3">25</td>

      <td class="col4">damore.walker@example.org</td>

    </tr>

    <tr class="row5">

      <td class="col0">Mrs. Adella Schiller IV</td>

      <td class="col1">Guatemala</td>

      <td class="col2">Lacayo</td>

      <td class="col3">26</td>

      <td class="col4">jadyn.dibbert@example.com</td>

    </tr>

  </table>

</div>


查看完整回答
反對 回復(fù) 2021-07-01
  • 2 回答
  • 0 關(guān)注
  • 243 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號