如何循环访问表中的每个数据

<table class="table_style" id="table">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr >
      <td>1</td>
      <td>ACDB</td>
      <td>agaeg@aegrg.com</td>
      <td>98900000</td>
    </tr>
    <tr>
      <td>2</td>
      <td>DEFG</td>
      <td>defg@defg.com</td>
      <td>11111112</td>
    </tr>
    <tr>
      <td>3</td>
      <td>IJKL</td>
      <td>ijkl@ijkl.com</td>
      <td>1234323432</td>
    </tr>
  </tbody>
</table>

我对如何使用一个按钮从表中获取所有数据有点困惑。当用户单击按钮时，我应该获取所有表数据。我尝试使用以下代码。我需要以数组格式获取所有数据。这样我就可以将所有数据保存到我的数据库中。

    $("#saveButton").click(function(event) {
    var table = document.getElementById("table");
    var dataArray = [];
    var data = table.find('td'); 
    for (var i = 0; i <= data.size() - 1; i = i + 4) {
        data.push(data[i].textContent, data[i + 1].textContent, data[i + 2].textContent);
    }
});

试试这段代码。

$("#saveButton").click(function(event) {
    var data = [];
    $("#table tr").each(function(i){
        if(i != 0){
            data.push({
                id: $(this).find("td:eq(0)").html(), 
                name: $(this).find("td:eq(1)").html(), 
                email: $(this).find("td:eq(2)").html(), 
                phone: $(this).find("td:eq(3)")}).html()
            });
        }
    });
    //do something with data
});

如果你想

使用jquery，看看 https://jsfiddle.net/qg6xpy39/

.HTML：

<table class="table_style" id="table">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr >
      <td>1</td>
      <td>ACDB</td>
      <td>agaeg@aegrg.com</td>
      <td>98900000</td>
    </tr>
    <tr>
      <td>2</td>
      <td>DEFG</td>
      <td>defg@defg.com</td>
      <td>11111112</td>
    </tr>
    <tr>
      <td>3</td>
      <td>IJKL</td>
      <td>ijkl@ijkl.com</td>
      <td>1234323432</td>
    </tr>
  </tbody>
</table>
<button id="saveButton">
  click
</button>

.JS：

$("#saveButton").click(function(event) {
    var rows = $('#table td'); // retrieve the rows of your table
    var dataArray = [];
    $.each(rows, function(idx, elt) {
      dataArray.push($(elt).text()); // add cell text content to the data array
    });
    console.log(dataArray); // so you can check what's in the array ;-)
});

正如评论中所说，在普通的JavaScirpt中。

使用"querySelectorAll"选择所有tr。然后迭代它们中的每一个，并得到它td的内部 HTML 并将其推送到数组中。

然后使用Array.shift()删除th元素。也就是说，标题。

代码

function save(){
  var arr=[];
  var tr=document.querySelectorAll('tr');
  tr.forEach(function(x,y){
    arr[y]=[];
    x.querySelectorAll("td").forEach(function(z){
      arr[y].push(z.innerHTML);
    });
  });
  arr.shift();
  console.log(arr);
}

检查下面的代码片段。

function save(){
  var arr=[];
  var tr=document.querySelectorAll('tr');
  tr.forEach(function(x,y){
    arr[y]=[];
    x.querySelectorAll("td").forEach(function(z){
      arr[y].push(z.innerHTML);
    });
  });
  arr.shift();
  console.log(arr);
}

<table class="table_style" id="table">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr >
      <td>1</td>
      <td>ACDB</td>
      <td>agaeg@aegrg.com</td>
      <td>98900000</td>
    </tr>
    <tr>
      <td>2</td>
      <td>DEFG</td>
      <td>defg@defg.com</td>
      <td>11111112</td>
    </tr>
    <tr>
      <td>3</td>
      <td>IJKL</td>
      <td>ijkl@ijkl.com</td>
      <td>1234323432</td>
    </tr>
  </tbody>
</table>
<button onclick="save();">Save</button>

另一种可能的方法是，再次使用纯javascript而不是jQuery，方法是通过Document.evaluate()将DOM NodeIterator与XPath结合使用

。

   <!doctype html>
    <html>
        <head>
            <meta charset='utf-8' />
            <title>Javascript DOM Processing</title>
            <script type='text/javascript'>
                document.addEventListener('DOMContentLoaded',function(e){
                    var query='/html/body/table[@id="table"]/tbody/tr/td';

                    var xpr = document.evaluate( query, document, null, XPathResult.ANY_TYPE, null );
                    var td = xpr.iterateNext();
                    var dataTbl=[];
                    while( td ){
                        try{
                            dataTbl.push( td.textContent );
                            td=xpr.iterateNext();
                        }catch( err ){
                            alert( 'Error'+err );
                        }
                    }
                    /* The data from all table cells is now in the array */
                    alert( dataTbl.join(String.fromCharCode(10)) );
                },false);
            </script>
        </head>
        <body>
            <!-- content -->
            <table class="table_style" id="table">
              <thead>
                <tr>
                  <th>Id</th>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Phone</th>
                </tr>
              </thead>
              <tbody>
                <tr >
                  <td>1</td>
                  <td>ACDB</td>
                  <td>agaeg@aegrg.com</td>
                  <td>98900000</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>DEFG</td>
                  <td>defg@defg.com</td>
                  <td>11111112</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>IJKL</td>
                  <td>ijkl@ijkl.com</td>
                  <td>1234323432</td>
                </tr>
              </tbody>
            </table>
        </body>
    </html>

最简单的方法是

var data_arr = [];
$('#table tr').each(function() {
  data_arr.push(this.cells[0].innerHTML);
  data_arr.push(this.cells[1].innerHTML);
  data_arr.push(this.cells[2].innerHTML);
  data_arr.push(this.cells[3].innerHTML);
});

相关内容

最新更新

热门标签：