javascript 使用 jQuery 遍历 html 表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18032838/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Traverse html table using jQuery
提问by sherry
I am jQuery beginner trying to traverse an html table using jQuery. I went through various posts related to this but none could satisfy my problem statement.
我是 jQuery 初学者，试图使用 jQuery 遍历 html 表。我浏览了与此相关的各种帖子，但没有一个可以满足我的问题陈述。
So below is the sample html table:
下面是示例 html 表：
<table>
<tr>
<td><input type="text" id="text1"></td>
<td>
<select>
<option value="abc">ABC</option>
<option value="def">DEF</option>
</select>
</td>
<tr>
<tr>..</tr>
</table>
I would ideally like to form a string with all the cell values of a record separated by a pipe like this: mytext,ABC | mytext2,DEF
理想情况下，我想用这样的管道分隔记录的所有单元格值来形成一个字符串：mytext,ABC | mytext2,DEF
Trying the following jQuery function but not been able to achieve this
尝试以下 jQuery 函数但无法实现
$(function abc() {
$("#save").click( function() {
var dataList;
var recordList;
var i = 0;
$('#summaryTable tr').each(function() {
alert('tr found');
$(this).find('td').each (function() {
alert('td found');
var data = $(this).html();
});
});
});
});
Any help would be great.Thanks.
任何帮助都会很棒。谢谢。
采纳答案by CME64
[Edited]
[编辑]
according to your question and example, the trs have the same structure,
根据您的问题和示例，trs 具有相同的结构，
then what you need is something like this :
那么你需要的是这样的：
this is if you want "textfield value","selected value" | "next trs .." : JSFiddle
这是如果你想要“文本字段值”，“选定值”| “下一个 trs ..”：JSFiddle
JS code:
JS代码：
var wordVal="";
var totalString = "";
$('#btn').click(function(){
totalString="";
$('table tr').each(function(i){
$(this).children('td').each(function(j){
if(j==0) wordVal = $(this).children('input').val().trim();
else totalString+= wordVal+','+$(this).children('select').val()+'|';
});
});
totalString= totalString.substring(0,totalString.length-1);
console.log(totalString);
});
js code for ("textfield value"1,"option1" | "textField value"2,"option2" .. etc): JSFiddle
("textfield value"1,"option1" | "textField value"2,"option2" .. etc) 的 js 代码：JSFiddle
var wordVal="";
var totalString = "";
$('#btn').click(function(){
totalString = "";
$('table tr').each(function(i){
$(this).children('td').each(function(j){
if(j==0) wordVal = $(this).children('input').val().trim();
$(this).children('select').children('option').each(function(k){
totalString+= wordVal+(k+1)+','+$(this).html()+'|';
});
});
totalString= totalString.substring(0,totalString.length-1)+'\n';
});
console.log(totalString);
});
回答by Clxy
I still don't get the comma and pipe, But try
我仍然没有得到逗号和管道，但试试
var objs = [];
$("table :input").each(function(i, v) {
objs.push($(v).val());
});
$("#result").html(objs.join("|"));
And here is the fiddle.
而这里是小提琴。
May you can work it out by yourself.
愿你能自己解决。
回答by Stano
The algorithm:
算法：
$(function () {
$('button').click(function () {
alert(getString());
});
function getString() {
var rows = $('table>tbody>tr'); // all browsers always create the tbody element in DOM
var arr = [];
for (var i = 0; i < rows.length; i++) {
var cells = rows.eq(i).children('td');
var text1 = cells.eq(0).find('input').val();
var text2 = cells.eq(1).find('select').val();
//var text2 = cells.eq(1).find('select option:selected').html();//alternative, if you want to collect the inner html instead
arr.push(text1 + ',' + text2); // add string to array
}
return arr.join('|'); // join the string in array to single string
}
});
回答by Rickyrock
var NewString = "";
$(".nav li > a").each(function(){
NewString = NewString + "This,"+$(this).text()+"|";
});
回答by Vishnu Kant Maurya
<label id="l1">Hello Test</label>
<label id="l2">Hello Test22222</label>
<input type="button" id="button1" />
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
var a = $('#l1').html();
$("#l1").text($('#l2').html());
$('#l2').text(a);
});
});
</script>
