Traverse html table using jQuery

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.

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>

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

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.

Answers


[Edited]

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

then what you need is something like this :

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

JS code:

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

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

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.


Need Your Help

How do I create a custom namespace or class in javascript

javascript jquery

I want to create my own namespace, something like $ for JQuery

Detecting HTML <a> click-to-call support in Javascript

javascript html5 mobile webkit tel

There are two ways to have click-to-call links in HTML

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.