Question

我需要使用JQuery捕获表格单元格（td标签）中的值，并将其传递给ajax请求。

<div id="table">
  <table id="table2">
    <tbody>
      <tr>
        <td>Total Fat</td>
        <td id="totalFat">26.3g</td>
        <td>Carb.</td>
        <td id="carb">8.8g</td>
      </tr>
      <tr>
        <td>Sat. Fat</td>
        <td id="satFat">1.8g</td>
        <td>Fiber</td>
        <td id="fiber">6.7g</td>
      </tr>
      <tr>
        <td>Carter</td>
        <td id="carter">0g</td>
        <td>Sugar</td>
        <td id="sugar">3.5g</td>
      </tr>
      <tr>
        <td>Cholest.</td>
        <td id="cholestral">304.5g</td>
        <td>Protein</td>
        <td id="protein">10.5g</td>
      </tr>
    </tbody>
  </table>
</div>

发送请求的Ajax请求代码

function foodLog() {
  var data = {
    carbs : $('#carb').text(),
    totalFat : $('#totalFat').val(),
    saturatedFat : $('#satFat').val(),
    carter : $('#carter').val(),
    fiber : $('#fiber').val(),
    cholestral : $('#cholestral').val(),
    sugar : $('#sugar').val(),
  };

  $.ajax({  
    type : "POST",   
    contentType: "application/json; charset=utf-8",
    url : "/fitbase/foodlog/create",
    dataType: "json",
    data : JSON.stringify(data),
    success : function(response) {  
      alert(response);
    },  
    error : function(e) {  
      alert('Error: ' + e);   
    }  
  });  
};

但是我无法将这些值嵌套在表格单元格中。

Answer 1

只是做：

var totalFat = $("#totalFat").text();
var carb = $("#carb").text();

Answer 2

将.val()替换为.text()：

function foodLog() {
  var data = {
    carbs : $('#carb').text(),
    totalFat : $('#totalFat').text(),
    saturatedFat : $('#satFat').text(),
    carter : $('#carter').text(),
    fiber : $('#fiber').text(),
    cholestral : $('#cholestral').text(),
    sugar : $('#sugar').text(),
  };

  $.ajax({  
    type : "POST",   
    contentType: "application/json; charset=utf-8",
    url : "/fitbase/foodlog/create",
    dataType: "json",
    data : JSON.stringify(data),
    success : function(response) {  
      alert(response);
    },  
    error : function(e) {  
      alert('Error: ' + e);   
    }  
  });  
};

Answer 3

正如chipChocolate.py所指出的那样，只有在文件中包含jquery之后，才能从.val()切换到.text()。我遇到了类似的问题。

要重现，我在文件中设置以下内容，并将其加载到浏览器中：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="table">
  <table id="table2">
    <tbody>
      <tr>
        <td>Total Fat</td>
        <td id="totalFat">26.3g</td>
        <td>Carb.</td>
        <td id="carb">8.8g</td>
      </tr>
    </tbody>
  </table>
</div>

如果不在上面的顶行包含javascript，则以下内容无效，但在包含后，.text()和.html()似乎返回了td中的内容：

proof of concept in browser

使用JQuery从html表中捕获值

3 个答案: