Question

我想问。如何将html表值传递给json stringify对象？我已经制作了一个代码，我尝试运行它并且进展顺利。也许我的代码中有错误的语法。吼叫是我到目前为止尝试制作的代码。我不知道为什么它不起作用，请帮助我。我是一个想要尝试了解新事物的新手

＆＃13;

// JavaScript Docume
$(document).on('click','#display_data',function(e){
    var convertTableToJson = function()
        {
            var rows = [];
            $('.table-bordered tr').each(function(i, n){
                var $row = $(n);
                rows.push({
                    $row.find('td:eq(0)').text(),
                    $row.find('td:eq(1)').text(),
                    $row.find('td:eq(2)').text(),
                    $row.find('td:eq(3)').text(),
                    $row.find('td:eq(4)').text(),
                    $row.find('td:eq(5)').text(),
                    $row.find('td:eq(6)').text(),
                    $row.find('td:eq(7)').text(),
                });
            });
            return JSON.stringify(rows);
        };
    $(function(){        
       console.log(convertTableToJson ());
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>Kode Material</th>
<th>Storage Location</th>
<th>Movement Type</th>
<th>Id Indentifier</th>
<th>Item</th>
<th>Date Input</th>
<th>Netto</th>
<th>Unit</th>
<th><input type="checkbox" id="mycheckbox1" name="mycheckbox1"></th>
</tr>
</thead>
<tbody>
<tr>
<td>101200</td>
<td>WCB</td>
<td>101</td>
<td>5006540050</td>
<td>1</td>
<td>10.08.2017</td>
<td>23.970</td>
<td>KG</td>
<td><input type="checkbox" class="mycheckbox" name="mycheckbox"></td>
</tr>
<tr>
<td>101200</td>
<td>WCB</td>
<td>101</td>
<td>5006539985</td>
<td>1</td>
<td>10.08.2017</td>
<td>42.970</td>
<td>KG</td>
<td><input type="checkbox" class="mycheckbox" name="mycheckbox"></td>
</tr>
</tbody>
</table>

＆＃13;

也许有人可以帮助我。我很感激，给我一个例子，并告诉我为什么我的代码不起作用。

这是我的代码

Answer 1

尝试options: { cutoutPercentage: 90, animation: { duration: 2000, onProgress: function(animation) { $progress.attr({ value: animation.animationObject.currentStep / animation.animationObject.numSteps, }); }, onComplete: function(animation) { alert('onAnimationComplete') } } },的{{1}}函数。对象需要一个键值对。所以使用map().get()元素文本

添加jquery

<强>更新

key

th

Answer 2

这正是您所需要的。

$(document).on('click','#display_data',function(e){
    var convertTableToJson = function()
        {
            var headings = [];
            var rows = [];
            $('.table-bordered tr').each(function(i, n){
               //for table header
               if(i==0){
                 $(n).find('th').each(function(){
                     if($(this).text()!==''){
                        headings.push($(this).text());
                     }
                  })
               }
               //for table data
               else{
                  var obj = {};
                  $(n).find('td').each(function(index){
                    if($(this).text()!==''){
                       obj[headings[index]] = $(this).text();
                    }
                  });
                  rows.push(obj);
               }
            });
            return JSON.stringify(rows);
        };
    $(function(){        
       console.log(convertTableToJson ());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>Kode Material</th>
<th>Storage Location</th>
<th>Movement Type</th>
<th>Id Indentifier</th>
<th>Item</th>
<th>Date Input</th>
<th>Netto</th>
<th>Unit</th>
<th><input type="checkbox" id="mycheckbox1" name="mycheckbox1"></th>
</tr>
</thead>
<tbody>
<tr>
<td>101200</td>
<td>WCB</td>
<td>101</td>
<td>5006540050</td>
<td>1</td>
<td>10.08.2017</td>
<td>23.970</td>
<td>KG</td>
<td><input type="checkbox" class="mycheckbox" name="mycheckbox"></td>
</tr>
<tr>
<td>101200</td>
<td>WCB</td>
<td>101</td>
<td>5006539985</td>
<td>1</td>
<td>10.08.2017</td>
<td>42.970</td>
<td>KG</td>
<td><input type="checkbox" class="mycheckbox" name="mycheckbox"></td>
</tr>
</tbody>
</table>

<button id='display_data'>Click me </button>

注意不包含没有标题的最后一列，每个JSON对象都包含键作为列标题。

Answer 3

试试这个：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" >
	      
			
			<div class="wrapper">
				<ul class="stage clearfix" >

					<li class="scene">
						<div class="movie i1" onclick="return true" id="attacker">
							<div class="poster"></div>
							<div class="info">
								<header>
									<h1>THE ATTACKER</h1>
									<span class="year">1946</span>
									<span class="rating">GAME TIME</span>
									<span class="duration">90 minutes</span>
								</header>
								<p>
									In Bedford Falls, New York on Christmas Eve, George Bailey is deeply troubled. Prayers for his well-being from friends and family reach Heaven. Clarence Odbody, Angel Second Class, is assigned to visit Earth to save George, thereby earning his wings. Franklin and Joseph, the head angels, review George's life with Clarence.
								</p>
							</div>
						</div>
					</li>

					<li class="scene">
						<div class="movie i2" onclick="return true" id="midfield">
							<div class="poster"></div>
							<div class="info">
								<header>
									<h1>THE MID-FIELDER</h1>
									<span class="year">1951</span>
									<span class="rating">GAME TIME</span>
									<span class="duration">90 minutes</span>
								</header>
								<p>
									A cattle baron takes in an orphaned boy and raises him, causing his own son to resent the boy. As they get older the resentment festers into hatred, and eventually the real son frames his stepbrother for fathering an illegitimate child that is actually his, seeing it as an opportunity to get his half-brother out of the way so he can have his father's empire all to himself.
								</p>
							</div>
						</div>
					</li>

					<li class="scene">
						<div class="movie i3" onclick="return true" id="defender">
							<div class="poster"></div>
							<div class="info">
								<header>
									<h1>The DEFENFER</h1>
									<span class="year">1925</span>
									<span class="rating">GAME TIME</span>
									<span class="duration">90 minutes</span>
								</header>
								<p>
									The Tramp travels to the Yukon to take part in the Klondike Gold Rush. He gets mixed up with some burly characters and falls in love with the beautiful Georgia. He tries to win her heart with his singular charm.
								</p>
							</div>
						</div>
					</li>
                    <li class="scene">
						<div class="movie i4" onclick="return true" id="goalkeeper">
							<div class="poster"></div>
							<div class="info">
								<header>
									<h1>The GOALKEEPER</h1>
									<span class="year">1925</span>
									<span class="rating">GAME TIME</span>
									<span class="duration">90 minutes</span>
								</header>
								<p>
									The Tramp travels to the Yukon to take part in the Klondike Gold Rush. He gets mixed up with some burly characters and falls in love with the beautiful Georgia. He tries to win her heart with his singular charm.
								</p>
							</div>
						</div>
					</li>

				</ul>
			</div><!-- /wrapper -->
		</div><!-- /container -->

请参阅demo

如何传递html表数据值但不包括表的第1行作为json stringify对象

3 个答案: