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.

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.

• javascript
• jquery

• 1 what is mytext and mytext2 ? what logic behind mytext,ABC | mytext2,DEF is? – Ivan Chernykh Commented Aug 3, 2013 at 12:27
• @Cherniv sample values for the first textbox – sherry Commented Aug 3, 2013 at 12:30
• What does this question have to do with Java? Why the java tag? – Hovercraft Full Of Eels Commented Aug 3, 2013 at 12:33
• Why would you get different text from the input (there is no such thing as a 'textbox' in HTML) to give mytext, ABC and mytext2, DEF? – David Thomas Commented Aug 3, 2013 at 12:43
• @DavidThomas So you see there is one textbox and one dropdown with two options ABC and DEF.That way, mytext is sample value in the textbox and ABC is the option selected in the dropdown. – sherry Commented Aug 3, 2013 at 12:50

5 Answers 5

[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 ma 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.

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

var NewString = "";
$(".nav li > a").each(function(){
    NewString = NewString  + "This,"+$(this).text()+"|";
});

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

http://jsfiddle/T9RtQ/2/