有没有办法编写适用于两个行值的 getValue(t) 函数？答案

【问题标题】：Is there any way to write getValue(t) function which work for the both the row value?有没有办法编写适用于两个行值的 getValue(t) 函数？
【发布时间】：2021-09-10 11:13:26
【问题描述】：

我想以能够根据数组值更改行的方式编写 getValue(t) 函数，但是在实现此函数时我被卡住了。对于单独的功能可以正常工作，但不能仅在一个功能中完成。

var rowCount = $('#versionMainTable tr').length - 1;
console.log(rowCount);

// This mapping is mandatory
  const arrTd = {
  '0.1.22': [0,2,3,4,5,6,7,8,9,10],
  '0.1.23': [1,2,3,4,5,6,7,8,9,10],
  '0.1.29': [1,'',3,'',5,'',7,'',9,'']
};

const arrTd1 = {
  '0.1.30': [1,1,3,4,5,6,7,8,9,10],
  '0.1.31': [2,2,3,4,5,6,7,8,9,10],
  '0.1.32': [3,3,3,'',5,'',7,'',9,'']
};


// Generic way to work this function  (Need help to write Generic function which work for all the above data).  ???

function getValue(t){
  const cells = document.querySelectorAll('tr#itemsmodel1 td');

}


function getValue(t) {
  const cells = document.querySelectorAll('tr#itemsmodel1 td');
  arrTd[t.value].forEach((value, idx) => cells[idx + 3].innerText = value);
}

function getValue1(t) {
  const cells = document.querySelectorAll('tr#itemsmodel2 td');
  arrTd1[t.value].forEach((value, idx) => cells[idx + 3].innerText = value);
}

table, th, td {
  border: 1px solid black;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<table id="versionMainTable" style="width:100%">
    <thead>
    <th>#</th><th>Service Name</th><th>Chart Number</th><th>intgus1</th><th>qaus1</th><th>loadus1</th><th>appstaging</th><th>produs1</th><th>prodeu1</th><th>prodeu2</th><th>prodca1</th><th>prodanz1</th><th>prodsg1</th>
    </thead>

    <tr id = "itemsmodel1">
        <td>1</td><td>activity-registry</td>
        <td>
            <select id="select1" onchange="getValue(this)"><option disabled>Chart Version</option><option value="0.1.22" selected>0.1.22</option><option value="0.1.23">0.1.23</option><option value="0.1.29">0.1.29</option></select>
        </td>
            <td>0</td><td></td><td>26</td><td></td><td>26</td><td>31</td><td>31</td><td></td><td>31</td><td>22</td>
    </tr>
    <tr id = "itemsmodel2">
      <td>2</td><td>emm</td><td><select id="select2" onchange="getValue1(this)"><option disabled>Chart Version</option><option value="0.1.30" selected>1.0.30</option><option value="0.1.31">1.0.31</option><option value="0.1.32">1.0.32</option></select></td>
      <td>0</td><td>0</td><td></td><td>1</td><td></td><td>16</td><td>19</td><td></td><td>14</td><td>43</td>
    </tr>
</table>

非常感谢任何帮助，我正在尝试这样做但找不到任何解决方案。提前致谢。

【问题讨论】：

标签： javascript jquery node.js arrays

【解决方案1】：

这是一种方法。您可以将要使用的对象的引用存储在数据属性中。 <tr data-useobj="arrTd">。此外，对getValue(t) 的所有调用都可以相同（不需要getValue1(t) 等）。

这是一个可测试的 sn-p。

function getValue(t) {
  const tr = t.closest('tr'); // find the closest parent <tr>
  const cells = tr.querySelectorAll('td'); // get the collection of cells for that tr
  let useobj = this[tr.dataset.useobj] // the object we'll use is the one referenced in the data attribute
  useobj[t.value].forEach((value, idx) => cells[idx + 3].innerText = value);
}

// Return no. of row in table
var rowCount = $('#versionMainTable tr').length - 1;
console.log(rowCount);

// This mapping is mandatory
var arrTd = {
  '0.1.22': [0, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  '0.1.23': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  '0.1.29': [1, '', 3, '', 5, '', 7, '', 9, '']
};

var arrTd1 = {
  '0.1.30': [1, 1, 3, 4, 5, 6, 7, 8, 9, 10],
  '0.1.31': [2, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  '0.1.32': [3, 3, 3, '', 5, '', 7, '', 9, '']
};


function getValue(t) {
  const tr = t.closest('tr');
  const cells = tr.querySelectorAll('td');
  let useobj = this[tr.dataset.useobj]
  useobj[t.value].forEach((value, idx) => cells[idx + 3].innerText = value);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
    }
  </style>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- <link rel="stylesheet" href="app.css"> -->
  <!-- <script type="text/javascript" src="test.js"></script> -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  <title>Test Row</title>
</head>

<body>

  <table id="versionMainTable" style="width:100%">
    <thead>
      <th>#</th>
      <th>Service Name</th>
      <th>Chart Number</th>
      <th>intgus1</th>
      <th>qaus1</th>
      <th>loadus1</th>
      <th>appstaging</th>
      <th>produs1</th>
      <th>prodeu1</th>
      <th>prodeu2</th>
      <th>prodca1</th>
      <th>prodanz1</th>
      <th>prodsg1</th>
    </thead>

    <tr id="itemsmodel1" data-useobj='arrTd'>
      <td>1</td>
      <td>activity-registry</td>
      <td>
        <select id="select1" onchange="getValue(this)">
          <option disabled>Chart Version</option>
          <option value="0.1.22" selected>0.1.22</option>
          <option value="0.1.23">0.1.23</option>
          <option value="0.1.29">0.1.29</option>
        </select>
      </td>
      <td>0</td>
      <td></td>
      <td>26</td>
      <td></td>
      <td>26</td>
      <td>31</td>
      <td>31</td>
      <td></td>
      <td>31</td>
      <td>22</td>
    </tr>
    <tr id="itemsmodel2" data-useobj='arrTd1'>
      <td>2</td>
      <td>emm</td>
      <td>
        <select id="select2" onchange="getValue(this)">
          <option disabled>Chart Version</option>
          <option value="0.1.30" selected>1.0.30</option>
          <option value="0.1.31">1.0.31</option>
          <option value="0.1.32">1.0.32</option>
        </select>
      </td>
      <td>0</td>
      <td>0</td>
      <td></td>
      <td>1</td>
      <td></td>
      <td>16</td>
      <td>19</td>
      <td></td>
      <td>14</td>
      <td>43</td>
    </tr>
  </table>

</body>

</html>

【讨论】：