如何从表格中获取div和输入单元格中的数据?

时间:2016-02-19 02:56:20

标签: javascript jquery html html-table

我还是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>

2 个答案:

答案 0 :(得分:0)

在javascript中你可以使用方法document.getElementById("tagId")例如你的document.getElementById("time"),或者你可以使用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)") 

我认为

答案 1 :(得分:0)

这是我为你建造的Jsfiddle JsFiddle To Get table values

我使用的代码是

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

在小提琴中我点了一个按钮来获取点击按钮的值,我在alert中显示值,你可以根据你的要求更改代码   - 列出项目

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

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