CODEWITHSUNDEEP
javascriptjquery
Rajasekhar
Rajasekhar

Reputation: 2455

How to get Table "Td" values dynamically

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

Upvotes: 0

Views: 850

Answers (4)

codeFareith
codeFareith

Reputation: 97

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

});

Upvotes: 1

Kishore Sahasranaman
Kishore Sahasranaman

Reputation: 4230

Issue was in the below line .

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

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

Upvotes: 1

Joy Biswas
Joy Biswas

Reputation: 6527

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"

Upvotes: 1

Norlihazmey Ghazali
Norlihazmey Ghazali

Reputation: 9060

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

Upvotes: 1

Related Questions