使用jQuery遍历html表 [英] Traverse html table using jQuery

问题描述

我是jQuery初学者尝试使用jQuery遍历html表。我经历了与此相关的各种帖子，但没有一个能满足我的问题陈述。

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.

以下是示例html表：

So below is the sample html table:

<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>

理想情况下，我希望形成一个字符串，其中包含由管道分隔的记录的所有单元格值这个：mytext，ABC | mytext2，DEF

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

尝试以下jQuery函数但未能实现此目的

Trying the following jQuery function but not been able to achieve this

$(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.

推荐答案

[已编辑]

根据您的问题和示例，trs具有相同的结构，

according to your question and example, the trs have the same structure,

然后您需要的是这样的：

then what you need is something like this :

如果您想要textfield value， 选定的价值| 下一个......： JSFiddle

this is if you want "textfield value","selected value" | "next trs .." : JSFiddle

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代码为（textfield value1，option1|textField value2， option2.. etc）： JSFiddle

js code for ("textfield value"1,"option1" | "textField value"2,"option2" .. etc): 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);
});

这篇关于使用jQuery遍历html表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！