Question

我有一个函数，我想在每个表行中获取第一个td的值。在循环时，我想将这些值中的每一个与用户选择的日期值进行比较。比较日期后，我需要获得该值应放在表中的位置。以下是我的代码示例：

HTML表：

<table id="tblBody_DBA">
    <tbody>
        <tr id="Att_5258717">
            <td>03/28/2017</td>
            <td></td>
        </tr>
        <tr id="Att_5258339">
            <td>03/25/2017</td>
            <td>03/26/2017</td>
        </tr>                       
        <tr id="Att_5258337">
            <td>03/22/2017</td>
            <td>03/24/2017</td>
        </tr>
        <tr id="Att_5258332">
            <td>03/16/2017</td>
            <td>03/21/2017</td>
        </tr>
        <tr id="Att_5258331">
            <td>03/10/2017</td>
            <td>03/15/2017</td>
        </tr>
    </tbody>
</table>

 function sortRow(distType, rowId){
        var newVal = document.getElementById("newDate").value; //this is new value that I have to compare against existing values and return position in the table.
        var tblID = document.getElementById("parentTable").value;
        var table = window.parent.document.getElementById("tblBody_"+tblID);
        var arrayDates = [];

        for(var i=0; table.rows.length; i++){
            //Here I'm getting JavaScript error: TypeError: table.rows[i] is undefined
            alert(table.rows[i].cells[0].innerHTML);
        }

    }

我在警告框中为每个表格单元格获取值，但在调试器中显示结束错误。如果有人可以提供帮助，请告诉我。我无法使用JQuery，在我的情况下，简单的JavaScript是完成此操作的唯一方法。

Answer 1

您可以专门从每个resource = models.OneToOneField(Resource, verbose_name="Allocation", limit_choices_to={'intake__isnull': True})获取第一个td：

tr

Answer 2

首先，您使用tr

获取所有var allTr = document.querySelectorAll ('tr')元素

然后循环浏览它们并从第一个td

获取文本

for (var i = 0; i  < allTr.length; i++) {
  allTr [i].firstChild.innerHTML;
}

Answer 3

<table id="tblBody_DBA">
    <tbody>
        <tr id="Att_5258717">
            <td>03/28/2017</td>
            <td></td>
        </tr>
        <tr id="Att_5258339">
            <td>03/25/2017</td>
            <td>03/26/2017</td>
        </tr>                       
        <tr id="Att_5258337">
            <td>03/22/2017</td>
            <td>03/24/2017</td>
        </tr>
        <tr id="Att_5258332">
            <td>03/16/2017</td>
            <td>03/21/2017</td>
        </tr>
        <tr id="Att_5258331">
            <td>03/10/2017</td>
            <td>03/15/2017</td>
        </tr>
    </tbody>
</table>
<script>
 function sortRow(distType){
        var table = document.getElementById(distType); //this is new value that I have to compare against existing values and return position in the table.
		for (var i = 0; i < table.rows.length; i++) {
   var firstCol = table.rows[i].cells[0]; //first column
    console.log(firstCol.innerHTML);// or anything you want to do with first col
}
    }
	sortRow("tblBody_DBA");
	
	</script>

Answer 4

忘记粘贴此代码段，这可能会有所帮助。在您回答有关评论的问题之前，无法确定最佳方法。

注意：以下代码使用一些ES6语法，这可能在IE中不可用，正如@Brian指出的那样。出于这个原因，鼓励Babel.js或合适的Polyfill。

这个想法是抓住每一行的第一个子单元格并迭代它们。使用map，您可以返回一个数组，然后可以使用indexOf对其进行排序或查询。

通过将元素作为数组的第一项返回，您可以使用[0].parentNode来检索TR，或使用[0].parentNode.id来获取它的ID。

"use strict";
let newVal = document.getElementById('newDate').value;
console.log('newVal:', new Date(newVal));

let tbl = document.getElementById('tblBody_DBA');
var col_values = [...tbl.querySelectorAll('tr > td:first-child')].map(el => {
  return [el, el.textContent, +new Date(el.textContent)];
}).sort((a,b) => a[2] > b[2] ? -1 : 1);

console.log(col_values);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<p>I have the function where I want to get the value for first td in each table row. While looping I want to compare each of these values with the date value that user picked. After comparing the dates I need to get the position where that value should be
  placed in the table. Here is example of my code:</p>

<p>HTML Table:</p>
<input id="newDate" value='3/24/2017' type="hidden" />
<table id="tblBody_DBA" class="table table-striped">
  <tbody>
    <tr id="Att_5258717">
      <td>03/28/2017</td>
      <td></td>
    </tr>
    <tr id="Att_5258339">
      <td>03/25/2017</td>
      <td>03/26/2017</td>
    </tr>
    <tr id="Att_5258337">
      <td>03/22/2017</td>
      <td>03/24/2017</td>
    </tr>
    <tr id="Att_5258332">
      <td>03/16/2017</td>
      <td>03/21/2017</td>
    </tr>
    <tr id="Att_5258331">
      <td>03/10/2017</td>
      <td>03/15/2017</td>
    </tr>
  </tbody>
</table>
<p>
  I'm getting value for each table cell in alert box but on the end error shows in my debugger. If anyone can help please let me know. I'm not able to use JQuery, plain JavaScript is the only way to et this done in my case.</p>

如何遍历表tr并获取第一个td的值？ JavaScript的

4 个答案: