如何使用单元格内的div和输入从表中获取数据？

Question

我还是js和jQuery的新手。 我将如何遍历表格并从每个单元格中获取数据（日期，并输入“ from”和“ to”）？

<table class="table table-striped table-bordered table-hover table-condensed" id="entryTable">
    <thead>
        <th>Date</th>
        <th>First Shift</th>
        <th>Second Shift</th>
    </thead>
    <tbody>
        <tr>
            <td>2/1/2016</td>
            <td>
                <div id="time" class="form-group">
                    From: <input type="text" id="start01"> 
                    To: <input type="text" id="end01">
                </div>
            </td>
            <td>
                <div id="time" class="form-group">
                    From: <input type="text" id="start02" > 
                    To: <input type="text" id="end02">
                </div>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

在javascript中，您可以在示例document.getElementById("time")使用方法document.getElementById("tagId") ，也可以使用document.getElementByClassName("tagClassName") or document.getElementByTagName("TagName")和它们每个都在JQuery库中返回一个dom元素数组，例如，它与CSS选择器非常相似。

$("#elementId") to select an element by its id 
$(".className") to select an elements by their class name 
$("tagname") like $("p") to select all the p tags in the dom 
$("div p") to select the p tags which in a div tag 
and for example in your code you can grape a th element in your table using a selector like that $("#entryTable > thead th:nth-child(2)") 

我认为

Answer 2

这是我为您构建的Jsfiddle JsFiddle获取表值

我使用的代码是

  var date = $('#entryTable').find('tbody td:eq(0)').text();

  var From01 = $('#entryTable').find('tbody td:eq(1) input:eq(0)').val();
  var To01 = $('#entryTable').find('tbody td:eq(1) input:eq(1)').val();

  var From02 = $('#entryTable').find('tbody td:eq(2) input:eq(0)').val();
  var To02 = $('#entryTable').find('tbody td:eq(2) input:eq(1)').val();

在小提琴中，我放置了一个按钮来单击按钮以获取值，我在警报中显示值，您可以根据需要更改代码-列表项

编辑：要遍历所有td，您可以执行此操作

$.each($('#entryTable').find('tbody td), function(){
         var currentTdOfLoop = $(this);
        //do your stuff here
});