javascript - 如何通过之前获得的索引获取两行或多行输入的值？

Question

我有一个问题：我有一个表格，您可以在第一行输入一些输入。我想通过不同的索引获取这些输入的值。我得到的不同索引是这样的：

        var arr = resultSums;
        var largest = [0];

        for (var i = 0; i < arr.length; i++) {
            var comp = (arr[i] - largest[0]) > 0;
            if (comp) {
                largest = [];
                largest.push(arr[i]);
            }
        }

        var arrIndex = [];
        for (var i = 0; i < arr.length; i++) {
            var comp = arr[i] - largest[0] == 0;
            if (comp) {
                arrIndex.push(i);
            }
        }

如果上面代码的结果是例如“2,4”，我如何获得输入的不同值（在表的第一行）？表名：“我的表”

表格的 HTML：

"                <table class="table" id="myTable">
                <tr>
                    <th>
                        <h4>Criteria</h4>
                    </th>
                    <th><input placeholder="Selection 1" :></th>
                    <th><input placeholder="Selection 2" :></th>
                </tr>
                <tr>
                    <td>
                        <input placeholder="Criterium 1">
                        <select style="margin-left: 2px;">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                    </td>
                    <td>
                        <select>
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                            <option>6</option>
                            <option>7</option>
                            <option>8</option>
                            <option>9</option>
                            <option>10</option>
                        </select>
                    </td>
                    <td>
                        <select>
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                            <option>6</option>
                            <option>7</option>
                            <option>8</option>
                            <option>9</option>
                            <option>10</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input placeholder="Criterium 2">
                        <select style="margin-left: 2px;">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                    </td>
                    <td>
                        <select>
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                            <option>6</option>
                            <option>7</option>
                            <option>8</option>
                            <option>9</option>
                            <option>10</option>
                        </select>
                    </td>
                    <td>
                        <select>
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                            <option>6</option>
                            <option>7</option>
                            <option>8</option>
                            <option>9</option>
                            <option>10</option>
                        </select></td>
                </tr>
            </table>"

我之前在 JS 中的函数将不同的选项相乘，并使用上面的 JS 代码获得索引。现在我想获取这些索引的输入值。

谢谢你的帮助！

标签： javascript

Answer 1

我已经对 HTML 进行了更改，并且像 Ismailm 一样，你看不到 100% 的关系，所以我创建了一个新的关系，用于将表内的输入值作为数组获取。

对不起英语。

document.addEventListener('DOMContentLoaded',function(){

    function getValuesOfInputsFill() {
      //Storage of values per row
      const valuesPerRow = [];
      //Fixed index if it a new row.
      var fixedIndex = -1;
      //Iterate ( Loop ) over cells
      document.querySelectorAll('#myTable tr td').forEach((c,index)=>{
        //Inner child element scope.
        let childScope = c.children[0];
        //Is a new row ?
        if ( c.scope === "row" ) {
          fixedIndex += 1;
          //Push the title.
          valuesPerRow.push( {row: childScope.innerText } );
        } else {
          //Establish a property name and then set the value.
          let propertyName = childScope.placeholder.replace(' ','').trim();
          valuesPerRow[fixedIndex][propertyName] = childScope.value;
        }
      });
      //Return the storage fullfilled.
      return valuesPerRow;
    }
    
    // Listener to the button for get the values of whole table.
    
    document.querySelector('.btn__get').addEventListener('click',(event)=>{
       const result = getValuesOfInputsFill();
       console.dir(result);
    });
    
});
      
      

<table class="table" id="myTable">
  <tbody>
    <tr>
        <td scope="row"><h4>Criteria 1</h4></td>
        <td><input placeholder="Selection 1" ></td>
        <td><input placeholder="Selection 2" ></td>
    </tr>
     <tr>
        <td scope="row"><h4>Criteria 2</h4></td>
        <td><input placeholder="Selection 1" ></td>
        <td><input placeholder="Selection 2" ></td>
    </tr>
    <tr>
        <td scope="row"><h4>Criteria 3</h4></td>
        <td><input placeholder="Selection 1" ></td>
        <td><input placeholder="Selection 2" ></td>
    </tr>
  </tbody>
 </table>
 
 <button class="btn__get">Get values</button>