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

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

用表格行中的所有值填充 JS 數(shù)組

用表格行中的所有值填充 JS 數(shù)組

繁華開滿天機(jī) 2022-07-01 10:23:18
我?guī)缀鯖]有使用過javascript，我被困住了：我有一張帶 id 的桌子JamTable我正在嘗試編寫一些 JS，它將<td>為單擊的任何行獲取每個(gè)值的數(shù)組，以便我可以在彈出窗口中顯示它，使用 ajax 調(diào)用通過 POST 請求將其返回到服務(wù)器，然后更新表上的元素，因此不需要回發(fā) - 但到目前為止，我什至無法填充數(shù)組。我有：    $(document).ready(function () {        // Get all table row elements <tr> in table 'JamTable' into var 'tr'        var tr = $('#JamTable').find('tr');        // Bind a 'click' event for each of those <tr> row elements        tr.bind('click', function (e) {            // so that when a row is clicked:                        var r = $(this).closest('tr').row;            var myArray = new Array(r.cells);            for (var c = 0, col; col = r.cells[c]; c++) {                alert(col.text)            }        });    });<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table id="JamTable">      <tbody>          <tr>              <td>1</td>              <td>JAM</td>              <td>0.004</td>          </tr>          <tr>              <td>3</td>              <td>BOB</td>              <td>0.24</td>          </tr>          <tr>              <td>9</td>              <td>Nasty Simon</td>              <td>94.3</td>          </tr>      </tbody>    </table>是的，當(dāng)談到 JS 時(shí)，我完全迷失了
查看完整描述

4 回答

?
拉丁的傳說

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

在這種情況下，使用適當(dāng)?shù)氖录惺浅晒Φ年P(guān)鍵。即使使用動態(tài)添加的行（在定義事件偵聽器后添加到DOM ），也可以保證在行上捕獲“單擊”事件


細(xì)分（見評論）：

const tableElm = document.querySelector('table')


// listen to "click" event anywhere on the <table>

tableElm.addEventListener('click', onTableClick)


function onTableClick(e){

  // event delegation 

  const rowElm = e.target.closest('tr')


  // traverse each child of the row (HTMLCollection). map the text value into an Array

  // https://stackoverflow.com/a/34250397/104380

  const values = rowElm ? [...rowElm.children].map(td => td.innerText) : []


  // print result

  console.clear()

  console.log(  values  )

}

<table>

  <tbody>

    <tr>

      <td>1</td>

      <td>JAM</td>

      <td>0.004</td>

    </tr>

    <tr>

      <td>3</td>

      <td>BOB</td>

      <td>0.24</td>

    </tr>

    <tr>

      <td>9</td>

      <td>Nasty Simon</td>

      <td>94.3</td>

    </tr>

  </tbody>

</table>


如果您將數(shù)據(jù)發(fā)送回服務(wù)器，您可能還應(yīng)該有一些唯一的 id <tr>，它可能需要知道它屬于哪一行


查看完整回答
反對 回復(fù) 2022-07-01
?
慕無忌1623718

TA貢獻(xiàn)1744條經(jīng)驗(yàn) 獲得超4個(gè)贊

您可以從 委派事件tr。點(diǎn)擊它得到children. 使用Array.from將創(chuàng)建一個(gè)數(shù)組td。用于迭代map并從中獲取文本td


$("#JamTable").on('click', 'tr', function(e) {

  let k = Array.from($(this).children()).map((item) => {

    return item.innerHTML;

  })

  console.log(k)


})

td {

  border: 1px solid green;

  cursor: pointer;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id='JamTable'>

  <tbody>

    <tr>

      <td>1</td>

      <td>JAM</td>

      <td>0.004</td>

    </tr>

    <tr>

      <td>3</td>

      <td>BOB</td>

      <td>0.24</td>

    </tr>

    <tr>

      <td>9</td>

      <td>Nasty Simon</td>

      <td>94.3</td>

    </tr>

  </tbody>



</table>


查看完整回答
反對 回復(fù) 2022-07-01
?
四季花海

TA貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超5個(gè)贊

你不需要jquery。


您可以使用querySelectorAll來獲取trs 并簡單地使用節(jié)點(diǎn)上的子tr節(jié)點(diǎn)來獲取tds


const trs = [...document.querySelectorAll('tr')]

trs.forEach(tr => tr.addEventListener('click', e => {

  // whenever it is clicked, get its tds

  const values = [...tr.children].map(td => td.innerText)

  console.log('click', values)

}, false))

<table>

  <tbody>

    <tr>

      <td>1</td>

      <td>JAM</td>

      <td>0.004</td>

    </tr>

    <tr>

      <td>3</td>

      <td>BOB</td>

      <td>0.24</td>

    </tr>

    <tr>

      <td>9</td>

      <td>Nasty Simon</td>

      <td>94.3</td>

    </tr>

  </tbody>

</table>


正如@vsync 建議的那樣，最好使用事件委托，以防您有很多行以避免綁定多次點(diǎn)擊。這也允許稍后添加更多行，而無需綁定更多點(diǎn)擊處理程序


edit2 仍然感謝@vsync，避免使用onclick并更喜歡addEventListener避免覆蓋現(xiàn)有事件


const table = document.querySelector('table')

table.addEventListener('click', e => {

  if (e.target.nodeName !== 'TD') { return }

  const values = [...e.target.parentNode.children].map(c => c.innerText)

  console.log(values)

}, false)

<table>

  <tbody>

    <tr>

      <td>1</td>

      <td>JAM</td>

      <td>0.004</td>

    </tr>

    <tr>

      <td>3</td>

      <td>BOB</td>

      <td>0.24</td>

    </tr>

    <tr>

      <td>9</td>

      <td>Nasty Simon</td>

      <td>94.3</td>

    </tr>

  </tbody>

</table>


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

TA貢獻(xiàn)1801條經(jīng)驗(yàn) 獲得超16個(gè)贊

$('#JamTable tbody tr').click(function () {

    var arr = [];

    $($(this).children('td')).each(function (index, val) {

        arr.push(val.innerText);

    });

    console.log(arr);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="JamTable">

    <tbody>

        <tr>

            <td>1</td>

            <td>JAM</td>

            <td>0.004</td>

        </tr>

        <tr>

            <td>3</td>

            <td>BOB</td>

            <td>0.24</td>

        </tr>

        <tr>

            <td>9</td>

            <td>Nasty Simon</td>

            <td>94.3</td>

        </tr>

    </tbody>

</table>


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

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

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

 公眾號

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