如何获得Table "Td"动态值

How to get Table "Td" values dynamically

本文关键字：quot 动态 Td 何获得 Table      更新时间：2023-09-26

我有一个小的要求，有一个表，所有的td包含文本框与尊重的值。一旦我们点击提交按钮，所有的表数据应该转换成XML格式的数据。

我尝试下面的代码，xml格式的数据生成，但文本显示为空。我很难得到table td的值。下面是代码:

$(".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>";
});

预期警报:

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

这里是FIDDLE

您尝试获取td的值而不是内部输入。

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

});

似乎你想从td内部的input获取数据，而不是整个td内容。

错误 

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

改成this

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

一切都会好起来的。更新

您需要使用find()

来定位输入

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

检查更新后的代码片段

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

问题在下一行

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

请参阅更新后的链接http://jsfiddle.net/kishoresahas/t9y1337e/2/

相关文章：