如何动态获取表“ Td”值

Question

I have small requirement, have one table and all td's contains text boxes with respected values. Once we click on submit button, all table data should convert XML formated data.

I tried with below code, xml formated data is generated, but text showing empty. I'm struggling to get table td values. Here is the code :

$(".multipleData tbody tr").each(function() {
    bodyRowSet = bodyRowSet + "<row>";
    $(this).find('td:not(:last-child)').each(function() {
        $td = $(this);
        /* Getting trouble here start*/
        var tdValue = $(this).val();
        /* Getting trouble here end*/
        var $th = $td.closest('table').find('th').eq($td.index()).html();
        bodyRowSet = bodyRowSet + "<" + $th + ">" + tdValue + "</" + $th + ">";  
    });
    bodyRowSet = bodyRowSet + "</row>";
});

Expected alert :

<?xml version="1.0" encoding="UTF-8">
<rowsets>
    <rowset>
         <row>
            <Header1>111111111</Header1>
            <Header2>AAAAAA</Header2>
            <Header3>3000</Header3>
            <Header4>MyBatch</Header4>
            <Header5>22222</Header5>
            <Header6>Y</Header6>
        </row>
        <row>
            <Header1>222222</Header1>
            <Header2>BBBBBB</Header2>
            <Header3>4000</Header3>
            <Header4></Header4>
            <Header5>MyBatch2</Header5>
            <Header6>N</Header6>
        </row>
        <row>
            <Header1>333333333</Header1>
            <Header2>CCCCCC</Header2>
            <Header3>5000</Header3>
            <Header4>MyBatch3</Header4>
            <Header5>555555555</Header5>
            <Header6>Y</Header6>
        </row>
    </rowset>
</rowsets>

Here is the FIDDLE

Answer 1

Seems like you wanna fetch data from input inside td , not the entire td content.

Error here

var tdValue = $(this).val();

Change into this

 // find the input and fetch it value
 var tdValue = $(this).find('input').val();

Everything should be fine. Updated DEMO

Answer 2

You need to locate the input using find()

var tdValue = $(this).find('input').val();

Check the updated snippet

  $(document).ready(function(){ $("#idXmlData").click(function(){ var xmlStart = "<?xml version=\\"1.0\\" encoding=\\"UTF-8\\">"; var xml = xmlStart; var xmlFirstRowSet = "<rowsets><rowset>"; var xmlLast="</rowset></rowsets>"; xmlFirstRowSet = xmlFirstRowSet; var headerRowSet=''; headerRowSet = headerRowSet; xmlFirstRowSet = xmlFirstRowSet + headerRowSet; var bodyRowSet =''; $(".multipleData tbody tr").each(function() { bodyRowSet = bodyRowSet + "<row>"; $(this).find('td').each(function() { $td = $(this); var tdValue = $(this).find('input').val(); var $th = $td.closest('table').find('th').eq($td.index()).html(); bodyRowSet = bodyRowSet + "<" + $th + ">" + tdValue + "</" + $th + ">"; }); bodyRowSet = bodyRowSet + "</row>"; }); xml = xmlStart + xmlFirstRowSet + bodyRowSet+xmlLast; window.alert(xml); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="multipleData" style="border:1px solid #000000;"> <thead style="background:grey;"> <tr> <th>Header1</th> <th>Header2</th> <th>Header3</th> <th>Header4</th> <th>Header5</th> <th>Header6</th> </tr> </thead> <tbody> <tr> <td><input type="text" value="111111111"></td> <td><input type="text" value="AAAAAA"></td> <td><input type="text" value="3000"></td> <td><input type="text" value="MyBatch"></td> <td><input type="text" value="22222"></td> <td><input type="text" value="Y"></td> </tr> <tr> <td><input type="text" value="222222"></td> <td><input type="text" value="BBBBBB"></td> <td><input type="text" value="4000"></td> <td><input type="text" value="MyBatch2"></td> <td><input type="text" value="333333"></td> <td><input type="text" value="N"></td> </tr> <tr> <td><input type="text" value="333333333"></td> <td><input type="text" value="CCCCCC"></td> <td><input type="text" value="5000"></td> <td><input type="text" value="MyBatch3"></td> <td><input type="text" value="555555555"></td> <td><input type="text" value="Y"></td> </tr> </tbody> </table> <input type="button" name="" value="XML Data" id="idXmlData" 

Answer 3

Issue was in the below line .

var tdValue = $(this).find("input").val();

Please see the updated link http://jsfiddle.net/kishoresahas/t9y1337e/2/

Answer 4

You try to get the value of the td instead of the inner input. Fixed that for you.

  $(document).ready(function(){
$("#idXmlData").click(function(){
var xmlStart =  "<?xml version=\"1.0\" encoding=\"UTF-8\">";
var xml = xmlStart;
var xmlFirstRowSet = "<rowsets><rowset>";
var xmlLast="</rowset></rowsets>";
xmlFirstRowSet = xmlFirstRowSet;
var headerRowSet='';
headerRowSet = headerRowSet;
xmlFirstRowSet = xmlFirstRowSet + headerRowSet;
var bodyRowSet ='';
$(".multipleData tbody tr").each(function() {
    bodyRowSet = bodyRowSet + "<row>";
    $(this).find('td').each(function() {
        var $td = $(this);
        var tdValue = $(this).find('input').val();
        var $th = $td.closest('table').find('th').eq($td.index()).html();
        bodyRowSet = bodyRowSet + "<" + $th + ">" + tdValue + "</" + $th + ">";  
    });
    bodyRowSet = bodyRowSet + "</row>";
});

xml = xmlStart + xmlFirstRowSet + bodyRowSet+xmlLast;
 window.alert(xml);     
});

});