javascript - 仅当 <select> 标签存在时，如何获取 <td> 内 <select> 的值？-6ren

javascript - 仅当的值？

转载作者：行者123 更新时间：2023-12-03 01:01:19

我有一个 HTML 页面及其关联的 js 文件。目的是将插入表中的数据转换为 JSON 文件。用户可以编辑表格单元格，然后单击按钮，以便 Javascript 文件解析数据并将其作为 Ajax 请求发送到服务器上的 PHP 文件。然后，PHP 文件将数据作为文件存储在服务器上，并将链接发回。对于标签，我需要使用 val() 而不是 text() 来获取所选值。但是，val() 返回一个空字符串。如何让它正确返回值？

var $TABLE = $('#table');
var $BTN = $('#export-btn');
var $EXPORT = $('#export');

$('.table-add').click(function () {
  var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');
  $TABLE.find('table').append($clone);
});

$('.table-remove').click(function () {
  $(this).parents('tr').detach();
});

$('.table-up').click(function () {
  var $row = $(this).parents('tr');
  if ($row.index() === 1) return; // Don't go above the header
  $row.prev().before($row.get(0));
});

$('.table-down').click(function () {
  var $row = $(this).parents('tr');
  $row.next().after($row.get(0));
});

// A few jQuery helpers for exporting only
jQuery.fn.pop = [].pop;
jQuery.fn.shift = [].shift;

$BTN.click(function () {
	//alert("ok");
  var $rows = $TABLE.find('tr:not(:hidden)');
  var headers = [];
  var data = [];
  
  // Get the headers (add special header logic here)
  $($rows.shift()).find('th:not(:empty)').each(function () {
    headers.push($(this).text().toLowerCase());
  });
  
  // Turn all existing rows into a loopable array
  $rows.each(function () {
    var $td = $(this).find('td');
    var h = {};
    // Use the headers from earlier to name our hash keys
    headers.forEach(function (header, i) {
      h[header] = $td.eq(i).val();  
		alert($td.eq(i).val());
    });
    
    data.push(h);
  });
  
  // Output the result
  normaldata = JSON.stringify(data);
  $.ajax({
      type: "POST",
      url: "filemaker.php",
      data:  {"data":normaldata},
      success: function(output) {

         
		var a = document.createElement('a');
		a.href = 'data.gmp'
		a.download = "data.gmp";
		a.click();
		//alert("reached here");
    }
});

  
});

.table-editable {
  position: relative;
}
.table-editable .glyphicon {
  font-size: 20px;
}

.table-remove {
  color: #700;
  cursor: pointer;
}
.table-remove:hover {
  color: #f00;
}

.table-up, .table-down {
  color: #007;
  cursor: pointer;
}
.table-up:hover, .table-down:hover {
  color: #00f;
}

.table-add {
  color: #070;
  cursor: pointer;
  position: absolute;
  top: 8px;
  right: 0;
}
.table-add:hover {
  color: #0b0;
}

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>HTML5 Editable Table</title>
  
  
 <link rel='stylesheet' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel='stylesheet' href='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
<a href='text.html' >aa</a>
  <div class="container">
  <h1>HTML5 Editable Table</h1>
  <p>Through the powers of <strong>contenteditable</strong> and some simple jQuery you can easily create a custom editable table. No need for a robust JavaScript library anymore these days.</p>
  
  <ul>
    <li>An editable table that exports a hash array. Dynamically compiles rows from headers</li> 
    <li>Simple / powerful features such as add row, remove row, move row up/down.</li>
  </ul>
  
  <div id="table" class="table-editable">
    <span class="table-add glyphicon glyphicon-plus"></span>
    <table class="table">
      <tr>
        <th>Type</th>
        <th>Doctor</th>
        <th>Specialization</th>
        <th>City</th>
        <th>Area</th>
        <th>Rank</th>
        <th></th>
        <th></th>
      </tr>
      <tr>
        <td contenteditable="true"> 
		<select> 
			<option value='pharmacist'>Pharmacist</option>
			<option value='doctor'>Doctor</option>
		</select>
	  </td>
        <td contenteditable="true">stir-fry</td>
        <td contenteditable="true">stir-fry</td>
        <td contenteditable="true">stir-fry</td>
        <td contenteditable="true">stir-fry</td>
         <td contenteditable="true"> 
		<select> 
			<option value='A+'>A+</option>
			<option value='A'>A</option>
			<option value='B'>B</option>
			<option value='C'>C</option>
		</select>
	  </td>
        <td>
          <span class="table-remove glyphicon glyphicon-remove"></span>
        </td>
    
      </tr>
      <!-- This is our clonable table line -->
      <tr class="hide">
	   <td contenteditable="true"> 
		<select> 
			<option value='pharmacist'>Pharmacist</option>
			<option value='doctor'>Doctor</option>
		</select>
	  </td>
        <td contenteditable="true">stir-fry</td>
        <td contenteditable="true">stir-fry</td>
        <td contenteditable="true">stir-fry</td>
        <td contenteditable="true">stir-fry</td>
        <td contenteditable="true"> 
		<select> 
			<option value='A+'>A+</option>
			<option value='A'>A</option>
			<option value='B'>B</option>
			<option value='C'>C</option>
		</select>
	  </td>
        <td>
          <span class="table-remove glyphicon glyphicon-remove"></span>
        </td>
 
      </tr>
    </table>
  </div>
  
  <button id="export-btn" class="btn btn-primary">Export Data</button>
  <p id="export"></p>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

最佳答案

给定以下 jQuery 方法:

The .val() method is primarily used to get the values of form elements such as input, select and textarea.

The result of the .text() method is a string containing the combined text of all matched elements.

对于每个表格单元格，您似乎想要返回 val() child 的<select> ，如果存在的话，并且 text() <td>的否则。

使用 JavaScript 的 logical OR operator ，我们可以选择text()或val()取决于哪个存在:

Logical OR (||)
expr1 || expr2
Returns expr1 if it can be converted to true; otherwise, returns expr2.

像这样:

$select.val() || $td.text()

这是一个例子:

var $TABLE = $('#table');
var $BTN = $('#export-btn');
var $EXPORT = $('#export');

$('.table-add').click(function() {
  var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');
  $TABLE.find('table').append($clone);
});

$('.table-remove').click(function() {
  $(this).parents('tr').detach();
});

$('.table-up').click(function() {
  var $row = $(this).parents('tr');
  if ($row.index() === 1) return; // Don't go above the header
  $row.prev().before($row.get(0));
});

$('.table-down').click(function() {
  var $row = $(this).parents('tr');
  $row.next().after($row.get(0));
});

// A few jQuery helpers for exporting only
jQuery.fn.pop = [].pop;
jQuery.fn.shift = [].shift;

$BTN.click(function() {
  //alert("ok");
  var $rows = $TABLE.find('tr:not(:hidden)');
  var headers = [];
  var data = [];

  // Get the headers (add special header logic here)
  $($rows.shift()).find('th:not(:empty)').each(function() {
    headers.push($(this).text().toLowerCase());
  });

  // Turn all existing rows into a loopable array
  $rows.each(function() {
    var $tds = $(this).find('td');
    var h = {};
    // Use the headers from earlier to name our hash keys
    headers.forEach(function(header, i) {
      var $td = $tds.eq(i);
      var $select = $td.find('select');
      h[header] = $select.val() || $td.text();
      console.log(h[header]);
    });
  });

});

.table-editable {
  position: relative;
}

.table-editable .glyphicon {
  font-size: 20px;
}

.table-remove {
  color: #700;
  cursor: pointer;
}

.table-remove:hover {
  color: #f00;
}

.table-up,
.table-down {
  color: #007;
  cursor: pointer;
}

.table-up:hover,
.table-down:hover {
  color: #00f;
}

.table-add {
  color: #070;
  cursor: pointer;
  position: absolute;
  top: 8px;
  right: 0;
}

.table-add:hover {
  color: #0b0;
}

<link rel='stylesheet' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel='stylesheet' href='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'>

<div id="table" class="table-editable">
  <span class="table-add glyphicon glyphicon-plus"></span>
  <table class="table">
    <tr>
      <th>Type</th>
      <th>Doctor</th>
      <th>Specialization</th>
      <th>City</th>
      <th>Area</th>
      <th>Rank</th>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <td contenteditable="true">
        <select>
          <option value='pharmacist'>Pharmacist</option>
          <option value='doctor'>Doctor</option>
        </select>
      </td>
      <td contenteditable="true">stir-fry</td>
      <td contenteditable="true">stir-fry</td>
      <td contenteditable="true">stir-fry</td>
      <td contenteditable="true">stir-fry</td>
      <td contenteditable="true">
        <select>
          <option value='A+'>A+</option>
          <option value='A'>A</option>
          <option value='B'>B</option>
          <option value='C'>C</option>
        </select>
      </td>
      <td>
        <span class="table-remove glyphicon glyphicon-remove"></span>
      </td>

    </tr>
    <!-- This is our clonable table line -->
    <tr class="hide">
      <td contenteditable="true">
        <select>
          <option value='pharmacist'>Pharmacist</option>
          <option value='doctor'>Doctor</option>
        </select>
      </td>
      <td contenteditable="true">stir-fry</td>
      <td contenteditable="true">stir-fry</td>
      <td contenteditable="true">stir-fry</td>
      <td contenteditable="true">stir-fry</td>
      <td contenteditable="true">
        <select>
          <option value='A+'>A+</option>
          <option value='A'>A</option>
          <option value='B'>B</option>
          <option value='C'>C</option>
        </select>
      </td>
      <td>
        <span class="table-remove glyphicon glyphicon-remove"></span>
      </td>

    </tr>
  </table>
</div>

<button id="export-btn" class="btn btn-primary">Export Data</button>
<p id="export"></p>

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js'></script>

关于javascript - 仅当 <select> 标签存在时，如何获取 <td> 内 <select> 的值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52613910/

文章推荐： javascript - onselectionchange 更新时变量不更新

文章推荐： javascript - 用于加速/减速运动的 d3 缓动函数

mysql - 连接的子查询(存在/存在)
SELECT *, `o_cheque_request.member_id`, `o_cheque_request.wallet_id` FROM `o_cheque_request`, `o_mem
SQL查找是否"存在"，别再count了！
根据某一条件从数据库表中查询『有』与『没有』，只有两种状态，那为什么在写SQL的时候，还要**SELECT count(*)**呢？无论是刚入道的程序员新星，还是精湛沙场多年的程序员老白，都是一如
c# - 存在、读写只需一步
我试图找出一个文件是否存在，如果存在，验证css样式是否已经存在，如果不存在，将它们写在文件末尾... 我已经完成了这一切，但分 3 个步骤: 该文件是否存在？ FileInfo fi= new Fi
android - 如何检测iOS用户或Android用户是否“存在”？
我们正在开发即时消息传递应用程序，并且需要在用户的化身上用绿点显示用户 friend 的“状态”。 “状态”远远超出了“my_app_is_opened_and_on_focus”，这意味着(我猜可能
SQL 查询不存在，存在
模式 Movie(title, year, director, budget, earnings) Actor(stagename, realname, birthyear) ActedIn(stag
MySQL 触发器语法错误 IF 存在
我有一个正在尝试创建的 MySQL 触发器，但无法获得正确的语法。触发器应该遍历一组关键字并将其与插入数据库的新帖子的标题进行匹配。如果找到匹配项，它应该将新帖子分配给该存储桶并更新存储桶的关键字集
MYSQL 选择子查询 IF 存在
我有 3 个表......用户、更新和碰撞。我想向发出 api 请求的用户返回最新订单的 feed 更新，并提供显示 feed 中每个状态所需的所有数据。我还需要包括更新是否已被发出 api 请求的
ios - UIViewController 存在
我正在尝试呈现一个带有 UIView 的 UIViewController。以下是我在 viewDidLoad 方法中尝试的代码。 //create the view controller UIVi
mysql - 如何在一个查询中进行多个计数/存在？
我正在努力弄清楚如何在不对 mysql 进行两次调用的情况下从一个表中检查两件事。我有一个 Members 表。我想测试MemberID 列中是否存在某个值，以及PhoneNumber 列中是否存在
vba - 循环没有 Do 错误但 Do 存在
以下代码给出了一个没有 Do Compile 错误的循环: Loop Sheets("Snap").Rows(1).AutoFilter Field:=5, Criteria1:=List
dns - 域名通过 "dig"存在
是否可以通过检查“dig”的输出来检查域名的存在？在绑定(bind)源中，我发现了这些常量: 0 DNS_R_NOEROR 1 DNS_R_FORMERR 2 DNS_R_SERVFAIL 3 DN
php - Controller 存在，但找不到页面
Controller 有问题我在 Windows 上使用服务器，一切正常，但在互联网上我试图访问页面 social_apartament/beauty_life/并且找不到该页面，代码错误 404这
d - 存在 `static if`时如何生成文档
/** This is struct S. */ struct S(T) { static if(isFloatingPoint!T) { /// This version works
clojure - 类型删除如何帮助 Clojure 存在？
JVM 类型删除如何帮助 Clojure？没有它，Clojure 还能存在吗？如果 JVM 有具体化的类型会发生什么？也就是说，Clojure 将如何改变？最佳答案 Clojure 根本不会有太大变
c - 为什么 system() 存在？
许多论文等提到对“system()”的调用是不安全且不可移植的。我不反对他们的论点。不过，我注意到许多 Unix 实用程序都有一个等效的 C 库。如果没有，源可用于各种这些工具。虽然许多论文和此类
javascript - js如何让一个变量值根据用户登录 Node 存在
在我的 Node js 应用程序中，我有一个用户登录 api。上面我在服务器端代码中创建了一个名为 customerid 的变量。现在，当用户身份验证成功时。我将他的 userid 值存储在我的 cu
azure - 存在 DNS 详细信息时重用资源管理器模板
我有一个工作资源管理器组，由 Ubuntu 14.04 虚拟机、网络接口(interface)、公共(public) IP 地址和存储帐户组成。我已经从这组资源中创建了一个模板。当我尝试部署这组资源
javascript - 存在 javascript 循环引用问题
我有一个函数createminor4(arr，锦标赛)它基本上将arr分成4组，每组8人，然后将它们一次交换到tourney 1组。从那里它插入四个{}，其中有 4 个带有空数组的键。我已经在 Ch
r - 存在 2 个图例时如何更改图例点的大小
我有一个图表，其中有两个图例。我需要更改其中一个图例的点的大小。我需要更改图例中“市场类型”的项目符号大小。我使用示例 here但不适用于我的图表。我的代码如下: k <- ggplot(subs
javascript - 存在 jQuery 字符串比较问题
我有 fiddle here展示我正在尝试做的事情。我有一个动态生成的表，因此列可以按用户选择的任何顺序显示。因此，我尝试获取两个特定 header 的索引，以便可以将 CSS 类添加到这两列以供稍

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 仅当的值？

首页

博学

6Ren·AI

商城

javascript - 仅当 标签存在时，如何获取 内 的值？

javascript - 仅当的值？