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

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

將 td 元素插入到行組

將 td 元素插入到行組

炎炎設(shè)計 2022-01-07 21:37:59
我制作了一個按鈕以將單元格作為列添加到一組行中，但是當(dāng)我嘗試單擊按鈕以添加整個列時，它會將td元素作為文本插入這是代碼add_col.on('click',function() {    var table = $('#table_data'), //get the table    rowsNum = $('#table_data tr').length // get number of rows    cellsNum = document.getElementById('table_data').rows[0].cells.length    for(x = 0;x < rowsNum; x++){      //document.getElementById('table_data').rows[x].insertCell(cellsNum)      document.getElementById('table_data').rows[x].append('<td></td>')    }    })[https://jsfiddle.net/georgesteven1/3kpg6e8c/9/][1]
查看完整描述

3 回答

?
心有法竹

TA貢獻1866條經(jīng)驗 獲得超5個贊

如果你使用 Jquery，你可以遍歷表 tr 并添加一個新的 td。


add_col.on('click',function() {

    $('#table_data tbody tr').each(function( index ) {

       $('<td />').appendto($(this));       

    });

});


查看完整回答
反對 回復(fù) 2022-01-07
?
慕絲7291255

TA貢獻1859條經(jīng)驗 獲得超6個贊

查看addColumn()- 函數(shù)。

這很簡單。

  1. 選擇表中的所有行。

  2. <td>為每一行創(chuàng)建一個。

  3. 將這些 td 附加到行中。

PS：您可以決定為函數(shù)提供更多參數(shù)，例如列的標(biāo)題和默認(rèn)值?，F(xiàn)在我只是選擇了表的 ID 作為參數(shù)，所以你至少可以跨表重用它。PS2：我從按鈕上的 onclick 事件觸發(fā)了該功能。

function addColumn( tableId ) {

    let tableRows = document.querySelectorAll( `#${tableId} tr` );

  tableRows.forEach( row => {

    let td = document.createElement('td');

    row.appendChild(td);

  });

}

.add{position: fixed;top:10px}

table{

    margin: 30px auto;

}

table th,td{

    padding:10px;

    border-bottom: 1px solid #ddd;

    border-right:1px solid #ddd;

    text-align: center;

}

input{

    width:100px;

}

<div class="add">

        <button id="add-btn">Add Row</button>

        <button id="addCol-btn" onclick="addColumn('table_data')">Add Column</button>

    </div>

    <table id="table_data">

        <th>Name</th>

        <th>Color</th>

        <th>Price</th>

        <tr>

            <td>Alex</td>

            <td>Red</td>

            <td>150</td>

        </tr>

        <tr>

            <td>Max</td>

            <td>Blue</td>

            <td>300</td>

        </tr>

        <tr>

            <td>Mike</td>

            <td>Black</td>

            <td>700</td>

        </tr>

    </table>


查看完整回答
反對 回復(fù) 2022-01-07
?
GCT1015

TA貢獻1827條經(jīng)驗 獲得超4個贊

您可以簡化您的功能，如下所示：


   add_col.on('click',function() {

            $("#table_data tr").each(function(i) {

               if( i > 0 ) {

                    $(this).append('<td><input type="text" /></td>')               

               }

            });

    });

這是更新的小提琴


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

添加回答

舉報

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

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

 公眾號

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