javascript 如何使用jquery检索HTML数据表中未选中行的值

raogr8fs 于 2023-05-21 发布在 Java

关注(0)|答案(1)|浏览(98)

我试图得到所有行的值，没有点击他们的按钮。例如，当我单击第一行上的按钮时，我想检索没有单击的行的值。

var table = document.getElementById("all_department");
if (table != null) {
  for (var i = 0; i < table.rows.length; i++) {
  table.rows[i].onclick = function() {
  tableText(this);
      }
    }
  }    
    
function tableText(tableRow) {
var myJSON = JSON.stringify(tableRow);
console.log(myJSON);
}

<table id="all_departments">
     <thead>
              <th><button>click</button></th>                                   
              <th>Departments</th>
              <th>Creation Date</th>
              <th>Name</th>
     </thead>
    <tbody class="bl">
           <tr>
                <td><button>click</button></td>
                <td>Management</td>
                <td>2-3-2016</td>
                <td>client x</td>
          </tr>
    
           <tr>
                <td><button>click</button></td>
                <td>Sales</td>
                <td>25-6-2019</td>
                <td>client y</td>
          </tr>
    </tbody>
    </table>

JavaScript

来源：https://stackoverflow.com/questions/76286301/how-to-retrieve-values-of-non-selected-row-in-html-datatable-using-jquery

1条答案

按热度按时间

ddrv8njm1#

你可以监听按钮上的click handler，获取被点击按钮的父树，然后获取兄弟树。
一旦你得到了所有的兄弟，我们就可以循环它们并形成我们的结果字符串。
请参考下面的代码

const allBtns = document.querySelectorAll('button');
allBtns.forEach(function(btn) {
  btn.addEventListener('click', function(e) {
    let elem = this.closest('tr');
    const siblings = getSiblings(elem);
    const result = [];
    siblings.map(ele => {
      ele.querySelectorAll('td').forEach((e, i) => {
        if (i !== 0) {
          result.push(e.innerText);
        }
      });
    });
    console.log(result.join(','));
  })
});

const getSiblings = function(e) {
  let siblings = [];
  if (!e.parentNode) {
    return siblings;
  }

  let sibling = e.parentNode.firstChild;

  while (sibling) {
    if (sibling.nodeType === 1 && sibling !== e) {
      siblings.push(sibling);
    }
    sibling = sibling.nextSibling;
  }
  return siblings;
};

<table id="all_departments">
  <thead>
    <th><button>click</button></th>
    <th>Departments</th>
    <th>Creation Date</th>
    <th>Name</th>
  </thead>
  <tbody class="bl">
    <tr>
      <td><button>click</button></td>
      <td>Management</td>
      <td>2-3-2016</td>
      <td>client x</td>
    </tr>
    <tr>
      <td><button>click</button></td>
      <td>Sales</td>
      <td>25-6-2019</td>
      <td>client y</td>
    </tr>
  </tbody>
</table>

赞(0）回复(0）举报 2023-05-21

我来回答

javascript 如何使用jquery检索HTML数据表中未选中行的值

1条答案

相关问题

热门标签

最新问答