Question

我有一个小要求，有一个表，所有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

Answer 1

好像您想从input内的td获取数据，而不是整个td内容。

错误

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

更改为

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

一切都应该没问题。更新了 DEMO

Answer 2

您需要使用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"

Answer 3

问题在下面一行。

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

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

Answer 4

您尝试获取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”值

4 个答案: