亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

Jquery-從 <td> 內的輸入獲取值到數組中

Jquery-從 <td> 內的輸入獲取值到數組中

達令說 2023-10-17 17:32:08
我正在嘗試從表中獲取用戶填寫的輸入。該表只有 2 列,如何從中獲取輸入?我想為每一列項目都有不同的變量?表格通過控制行的滑塊動態改變大小。這是我的桌子:<div id="table-gen">            <p>Als je dezelfde herhaling doet voor alle sets, kan je slechts één waarde invullen: bvb. voor 4 sets                slechts éénmaal 10 invoeren voor de herhalingen. Dit wordt dan automatisch 4 x 10.</p>            <table id="resultTable" cellpadding="1" cellspacing="1" border="1">                <tr>                    <th scope="col"></th>                    <th scope="col">Hoeveelheid</th>                    <th scope="col">Gewicht x KG</th>                </tr>                <tr>                    <td>1</td>                    <td><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>                    <td><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>                </tr>                <tr>                    <td>2</td>                    <td><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>                    <td><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>                </tr>                <tr>                    <td>3</td>                    <td><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>                    <td><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>                </tr>            </table>        </div>這就是它的樣子: 我嘗試了以下方法:var col1_Array = $('#resultTable td:nth-child(1)').map(function () {    return $(this).text();}).get();var col2_Array = $('#resultTable td:nth-child(2)').map(function () {    return $(this).text();}).get();這只給了我第一列和一個空字符串。我嘗試將其上傳到 firebase ,進展順利。除了第一列是默認數字之外,在我更改表格的大小后,它不知何故沒有注冊。function writeData(){    firebase.database().ref("Exercise").set({        nameExercise: exerciseName.value,        setAm: setAmount,        setReps:col1_Array,        weight:col2_Array,    })}我怎樣才能最好地繞過這個動態變化的表?把這個表重構為div是不是更好?我感覺我現在正在挖一個兔子洞..
查看完整描述

1 回答

?
慕田峪9158850

TA貢獻1794條經驗 獲得超7個贊

將類 HoeveelheidField 和 GewichtField 添加到 td 中


  <tr>

           <td>1</td>

           <td class="HoeveelheidField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>

           <td class="GewichtField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>

  </tr>

然后為了獲得所有值


function getData(){

$('#resultTable .HoeveelheidField > input ').each(function() {

  HoeveelheidArr.push($(this).val());

});

$('#resultTable .GewichtField > input').each(function() {

  Gewicht.push($(this).val());

});

運行此代碼片段來測試它是否有效


var HoeveelheidArr=[];

var Gewicht=[]

function getData(){

$('#resultTable .HoeveelheidField > input ').each(function() {

  HoeveelheidArr.push($(this).val());

});

$('#resultTable .GewichtField > input').each(function() {

  Gewicht.push($(this).val());

});

console.log(HoeveelheidArr);

console.log(Gewicht);

}

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

<table id="resultTable" cellpadding="1" cellspacing="1" border="1">

                <tr>

                    <th scope="col"></th>

                    <th scope="col">Hoeveelheid</th>

                    <th scope="col">Gewicht x KG</th>

                </tr>

                <tr>

                    <td>1</td>

                    <td class="HoeveelheidField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>

                    <td class="GewichtField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>

                </tr>

                <tr>

                    <td>2</td>

                    <td class="HoeveelheidField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>

                    <td class="GewichtField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>

                </tr>

                <tr>

                    <td>3</td>

                    <td class="HoeveelheidField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>

                    <td class="GewichtField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>

                </tr>

            </table>

            <button onclick="getData()">Get Data</button>


查看完整回答
反對 回復 2023-10-17
  • 1 回答
  • 0 關注
  • 137 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號