使用Javascript

Question

我需要遍历HTML表格并使用javascript以特定方式获取值。

我的表格如下：

<table>
    <tr>
        <td class="name">Henk</td>
        <td class="day">tuesday</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td></td>
        <td id="number_2">667</td>
    </tr>
    <tr>
        <td class="name">Jill</td>
        <td class="day">monday</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td id="number_5">77</td>
    </tr>
    <tr>
        <td class="name">Joe</td>
        <td class="day">wednesday</td>
        <td>text</td>
        <td>text</td>
        <td></td>
        <td></td>
        <td></td>
        <td id="number_1">112</td>
    </tr>
    <tr>
        <td class="name">Henk</td>
        <td class="day">monday</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td id="number_3">345</td>
    </tr>
    <tr>
        <td class="name">Joe</td>
        <td class="day">friday</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td></td>
        <td></td>
        <td id="number_4">332</td>
    </tr>
</table>

我需要收集的是：

 Henk,345,667,0,0,0
 Jill,77,0,0,0,0
 Joe,0,0,112,0,332

这些名字只需要收集一次，然后拿起这个人在号码单元格中列出的号码的日期，将按工作日（星期一至星期五）排序。没有数字的日子可以填写＆＃39; 0＆＃39;

该表格将生成，可以是任何长度和任何特定顺序。因此，如果我要刷新页面，可以更改行顺序（例如，将Jill，77放在第一行）。表和内容是使用PHP生成的，但是数字单元格由javascript填充。之后，将按下一个按钮以使用javascript导出数据。然后，它将用作csv文件的输入。 在导出中，＆＃39;文本＆＃39;值被忽略。

我似乎无法获得正确的循环。我怎样才能用javascript实现这个目标？

编辑：我没有示例代码，因为我尝试的所有内容都无法提供正确的结果。

Answer 1

在表格中添加一个ID，例如：tbl1。 然后：

$(function(){
    $('#tbl1 tr').each(function() {
      $( this ).find('td').each(function() {
        console.log($(this).html());
      });
    });
});

Answer 2

你可以这样做，

var data = {},
  res = '',
  days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday'];
$('table tr').each(function() {
  // iterate all tr using each()
  var $this = $(this),
    name = $this.find('td:first-child').text();
    // getting name from first column
  if (!data[name])
  // checking object added or not , if not then creating object with name and 0 valued array
    data[name] = [0, 0, 0, 0, 0];
  data[name][days.indexOf($this.find('td.day').text())] = $this.find('td[id^="number_"]').text();
   // finding number and inserting it based on day
});

$.each(data, function(i, v) {
// iterating object using $.each  
  res += i + ',' + v.join() + '\n';});
  // generating prefered string
alert(res);
console.log(res);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="name">Henk</td>
    <td class="day">tuesday</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td></td>
    <td id="number_2">667</td>
  </tr>
  <tr>
    <td class="name">Jill</td>
    <td class="day">monday</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td id="number_5">77</td>
  </tr>
  <tr>
    <td class="name">Joe</td>
    <td class="day">wednesday</td>
    <td>text</td>
    <td>text</td>
    <td></td>
    <td></td>
    <td></td>
    <td id="number_1">112</td>
  </tr>
  <tr>
    <td class="name">Henk</td>
    <td class="day">monday</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td id="number_3">345</td>
  </tr>
  <tr>
    <td class="name">Joe</td>
    <td class="day">friday</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td></td>
    <td></td>
    <td id="number_4">332</td>
  </tr>
</table>

Answer 3

这是一个使用Jquery“each”并在json中格式化数据的简单方法。

/* json formatted data */
var data = [
		{"id":"1","name":"Henk","day":"Friday"},
		{"id":"2","name":"Jill","day":"Monday"},
		{"id":"3","name":"Joe","day":"Saturday"}
];


$(document).ready(function(){
	var html='';
	if(data != null){
		$.each(data,function(i,val){
			var id = val.id,
				name = val.name,
				day = val.day;
				
				html+='<tr> \
					<th scope="row" id="number_'+id+'">'+id+'</th> \
					<td>'+name+'</td> \
					<td>'+day+'</td> \
					<td>text</td> \
					</tr>';
		});
		
		$(html).appendTo('.results');
		
		}else{
		
			html='';
			alert('No data available');
				
		$('.results').empty();
	}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
	<thead>
		<tr>
			<th>#ID</th>
			<th>Name</th>
			<th>Day</th>
			<th> - - - </th>
		</tr>
	</thead>
	<tbody class="results">
	</tbody>
</table>

Answer 4

这里有一些js（带有jquery）吐出所需的输出：

Henk: 345, 667, 0, 0, 0
Jill: 77, 0, 0, 0, 0
Joe: 112, 332, 0, 0, 0

提供的html结构。

var people = {};
$.each($('table').children().children(), function(index, value) {
    var thisElement = $(value).children();
    var thisName = $(thisElement[0]).text()
    ,   thisValue = parseInt($(thisElement[7]).text());
    if(typeof people[thisName] === "undefined") {
        people[thisName] = [0, 0, 0, 0, 0];
        people[thisName][0] = thisValue;
    } else {
        for(index = 0; index < 5; index ++) {
            var curValue = people[thisName][index];
            if(curValue == 0 || curValue > thisValue) {
                people[thisName][index] = thisValue;
                thisValue = curValue;
            }
        }
    }
});
for(index in people) {
    console.log(index + ',' + people[index]);
}

Answer 5

我把表格给了＃34;表＆＃34;然后我这样做了：

var tbody = document.getElementById("table").children;
var array = new Array();
var aux_name, aux_number;
for( var i = 0; i < tbody.item(0).children.length ; i++){
    if(tbody.item(0).children[i] != undefined){
        aux_name = tbody.item(0).children[i].children[0].innerText;
        array[aux_name] = "";
    }
}

for( var i = 0; i < tbody.item(0).children.length ; i++){ // tr
        if(tbody.item(0).children[i] != undefined)
        {
            aux_name = tbody.item(0).children[i].children[0].innerText;
            aux_number = tbody.item(0).children[i].children[7].innerText;
            if(array[aux_name] != 0){
                var aux_new_value = array[aux_name].concat(", " + aux_number);
                array[aux_name] = aux_new_value;

            } else {
                array[aux_name] = aux_number;
            }
            fillArray(array, aux_name);
        }    
}

function fillArray(array, except){
    for( var i = 0 ; i < Object.keys(array).length ; i++){
        if(Object.keys(array)[i] != except){
            array[Object.keys(array)[i]] = array[Object.keys(array)[i]] == "" ? array[Object.keys(array)[i]].concat("0") : array[Object.keys(array)[i]].concat(", 0");    
        }            
    }
}
console.log(array);

希望它有所帮助。

Answer 6

解决方案非常简单，您所要做的就是：

• 通过使用公共id替换数字td中的class来更改HTML代码，以便解析更加简单。
• 遍历表行并将唯一名称存储在数组中。
• 创建一个空的persons数组，用于容纳所有人。

• 循环遍历names数组，然后遍历每个name：

  1. 创建一个将保存其详细信息的人员对象（name, points）。
  2. 将name属性分配给此person对象。
  3. 创建一个用零初始化的点数组，以保存每天的数字/点数。
  4. 再次循环遍历表格行，每当您找到此name时，都会获取找到的天数并使用相关数字更新点数组。
  5. 最后将points数组分配给您的person对象。

最后只需打印所需的输出，如下面的DEMO所示。

＆＃13;

＆＃13;

var table = $('table')[0];
console.log(table.rows);

var persons = [];
var names = [];
var days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];

$('table#myTable tr').each(function() {
  var row = $(this);
  var name = row.find('td.name').html();
  if ($.inArray(name, names) === -1) {
    names.push(name);
  }
});

for (var i = 0; i < names.length; i++) {
  var name = names[i];
  var person = {};
  person.name = name;
  var points = [0, 0, 0, 0, 0, 0];
  $('table#myTable tr').each(function() {
    var row = $(this);
    var nameInTd = row.find('td.name').html();
    var dayInTd = row.find('td.day').html();
    if (name === nameInTd) {
      for (day in days) {
        if (days[day] === dayInTd) {
          points[day] = row.find('td.number').html();
        }
      }
    }
  });
  person.points = points;
  $("#output").html($("#output").html() + person.name + ", " + person.points.join(", ") + "<br>");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
  <tr>
    <td class="name">Henk</td>
    <td class="day">tuesday</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td></td>
    <td class="number">667</td>
  </tr>
  <tr>
    <td class="name">Jill</td>
    <td class="day">monday</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td class="number">77</td>
  </tr>
  <tr>
    <td class="name">Joe</td>
    <td class="day">wednesday</td>
    <td>text</td>
    <td>text</td>
    <td></td>
    <td></td>
    <td></td>
    <td class="number">112</td>
  </tr>
  <tr>
    <td class="name">Henk</td>
    <td class="day">monday</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td class="number">345</td>
  </tr>
  <tr>
    <td class="name">Joe</td>
    <td class="day">friday</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td></td>
    <td></td>
    <td class="number">332</td>
  </tr>
</table>
<h4>This is the result</h4>
<p id="output">

</p>

＆＃13;

＆＃13;

＆＃13;

这是JavaScript代码：

var table = $('table')[0];
console.log(table.rows);

var persons = [];
var names = [];
var days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];

$('table#myTable tr').each(function() {
  var row = $(this);
  var name = row.find('td.name').html();
  if ($.inArray(name, names) === -1) {
    names.push(name);
  }
});

for (var i = 0; i < names.length; i++) {
  var name = names[i];
  var person = {};
  person.name = name;
  var points = [0, 0, 0, 0, 0, 0];
  $('table#myTable tr').each(function() {
    var row = $(this);
    var nameInTd = row.find('td.name').html();
    var dayInTd = row.find('td.day').html();
    if (name === nameInTd) {
      for (day in days) {
        if (days[day] === dayInTd) {
          points[day] = row.find('td.number').html();
        }
      }
    }
  });
  person.points = points;
  $("#output").html($("#output").html() + person.name + ", " + person.points.join(", ") + "<br>");
}