Question

<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);
    }
});

Answer 1

如果您想使用jquery，请查看https://jsfiddle.net/qg6xpy39/

HTML：

function ValidateAlpha(evt) { 
  var keyCode = (evt.which) ? evt.which : evt.keyCode if (
    (keyCode < 65 || keyCode > 90) && 
    (keyCode < 97 || keyCode > 123) && 
    keyCode != 32 && 
    keyCode != 39
  )

JS：

<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>

Answer 2

试试这段代码。

C1

Answer 3

如评论中所述，简单的JavaScirpt。

使用querySelectorAll选择所有tr。然后迭代它们中的每一个并获得td的innerHTML并将其推入数组中。

然后使用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);
}

检查以下代码段。

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

Answer 4

另一种可能的方法，再次使用纯javascript而不是jQuery，将通过NodeIterator

将DOM Document.evaluate()与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>

Answer 5

最简单的方法是

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);
});

如何遍历表

5 个答案: