jQuery将单元格插入tr值和td值的特定位置 [英] JQuery insert cell to specific position of tr value and td value
问题描述
我有一个包含以下结构的表：
具有唯一编号的$adb中的状态，
和日期也具有唯一的日期本身值。
我想要的是在匹配（单元格状态和单元格日期）之后添加单元格， b
$ b
我有以下JSON：
{
data：[
[
{
orderStatus：2，
date_formatted：15-05-2017，
counter：2
}，
{
orderStatus：4，
date_formatted：15-05-2017，
counter：14
}，
{
orderStatus ：5，
date_formatted：15-05-2017，
counter：12
}，
{
orderStatus：11，
date_formatted：15-05-2017，
counter：6
}
]，
[
{
orderStatus：2，
date_formatted：16-05-2017，
counter：6
}，
{
orderStatus：4 ，
date_formatted：16-05-2017，
counter：15
}，
{
orderStatus：5，
date_formatted：16-05-2017，
counter：12
}，
{
orderStatus：11，
date_formatted：16-05-2017，
counter：5
}
]，
[
{
orderStatus：2，
date_formatted：17-05-2017，
counter：4
}，
{
orderStatus：4，
date_formatted：17-05-2017，
counter：10
}，
{
orderStatus：5，
date_formatted：17-05-2017，
counter：13
}，
{
orderStatus：11，
date_formatted：17-05-2017，
counter：6
}
]
]，
status_name：{
1：新，
2：待定，
3：正在路上，
4 ：已完成，
5：已取消客户，
6：Ti我$ out，
7：隐蔽，
8：进行中，
9：收据已创建，
10： Provider Arrive，
11：Provider取消，
12：Provider开始工作，
13：Provider暂停工作，
14：No Provider Available
}
}
所以我想在两个特定数据下输入订单状态（匹配第二个订单状态+匹配json元素和tbody td日期）。
我试过这个jQuery代码并且它不工作：
$（table thead：tr：th [value ='2'] tbody：tr：td ：[数值= '2017-20-9'] ）后（数据[ 数据 ] [COUNT] [ 计数器]）;
以下是我的示例代码片段：
$（table thead：tr：th [value ='2'] tbody：tr：td：[value =' （< td> Test< / td>）;
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js>< / script>< table id =table> < THEAD> < TR> < th值='2'>已完成< / th> < th值='4'>取消< / th> < th值='5'>待定< / th> < th值='1'>到达< / th> < th值='9'>等待< / th> < th值='10'>取消提供者< / th> < / TR> < / THEAD> < TBODY> < TR> < td value ='2017-20-8'> 2017-20-8< / td> < / TR> < TR> < td value ='2017-20-9'> 2017-20-9< / td> < / TR> < / tbody>< / table>
要达到你想要的效果，你可以这样做：
< script src =https： //ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><table id =table> < THEAD> < TR> <的第i;日期< / th> < th值='2'>已完成< / th> < th值='4'>取消< / th> < th值='5'>待定< / th> < th值='1'>到达< / th> < th值='9'>等待< / th> < th值='10'>取消提供者< / th> < / TR> < / THEAD> < TBODY> < TR> < td value ='2017-20-8'> 2017-20-8< / td> < / TR> < TR> < td value ='2017-20-9'> 2017-20-9< / td> < / TR> < / tbody>< / table>
添加了一些注释来解释代码的作用。
基本思想是确定标题的位置（索引）和列的位置。
你不能只在一个给定的水平位置上添加一列到一行，你必须填写行到单元格的位置以便排列单元水平。
I am having a table contain the following structure:
The status in thead having value with unique number, and the date also having a unique value of the date itself.
What I want is to add cell after matching the (cell status and cell date),
so , I am having the following JSON:
{
"data": [
[
{
"orderStatus": 2,
"date_formatted": "15-05-2017",
"counter": 2
},
{
"orderStatus": 4,
"date_formatted": "15-05-2017",
"counter": 14
},
{
"orderStatus": 5,
"date_formatted": "15-05-2017",
"counter": 12
},
{
"orderStatus": 11,
"date_formatted": "15-05-2017",
"counter": 6
}
],
[
{
"orderStatus": 2,
"date_formatted": "16-05-2017",
"counter": 6
},
{
"orderStatus": 4,
"date_formatted": "16-05-2017",
"counter": 15
},
{
"orderStatus": 5,
"date_formatted": "16-05-2017",
"counter": 12
},
{
"orderStatus": 11,
"date_formatted": "16-05-2017",
"counter": 5
}
],
[
{
"orderStatus": 2,
"date_formatted": "17-05-2017",
"counter": 4
},
{
"orderStatus": 4,
"date_formatted": "17-05-2017",
"counter": 10
},
{
"orderStatus": 5,
"date_formatted": "17-05-2017",
"counter": 13
},
{
"orderStatus": 11,
"date_formatted": "17-05-2017",
"counter": 6
}
]
],
"status_name": {
"1": "New",
"2": "Pending",
"3": "On Way",
"4": "Completed",
"5": "Cancelled Client",
"6": "Time out",
"7": "Secluded",
"8": "On Progress",
"9": "Receipt created",
"10": "Provider Arrive",
"11": "Provider cancelled",
"12": "Provider start the work",
"13": "Provider paused the work",
"14": "No Provider Available"
}
}
So I want to enter the order status under two specific data (match the thead th order status + match the json element with tbody td date).
I tried this jquery code and it's not working:
$("table thead:tr:th[value='2'] tbody:tr:td:[value='2017-20-9']").after(data["data"][count]["counter"]);
and this is my sample code in a snippet:
$("table thead:tr:th[value='2'] tbody:tr:td:[value='2017-20-9']").after("<td>Test</td>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table id="table">
<thead>
<tr>
<th value='2'> Completed </th>
<th value='4'> Cancelled </th>
<th value='5'> Pending </th>
<th value='1'> Arrived </th>
<th value='9'> Waiting </th>
<th value='10'> Cancelled Provider</th>
</tr>
</thead>
<tbody>
<tr>
<td value='2017-20-8'>2017-20-8</td>
</tr>
<tr>
<td value='2017-20-9'>2017-20-9</td>
</tr>
</tbody>
</table>
Constructs like this thead:tr:th are invalid css selectors, you need to use something like this instead thead tr th.
To achieve what you want you can do this:
$(function(){
// Determine the horizontal position
var headerIndex = $("table thead tr th[value=9]").index();
// Determine the vertical position
var columnIndex = $("tbody tr:has(td[value=2017-20-9])").index();
// Fill the row with cells to set the horizontal position appropriately
while($("tbody tr").eq(columnIndex).find("td").length < headerIndex){
$("tbody tr").eq(columnIndex).append("<td></td>");
}
// Check if there is already a cell at the given index and if it is, change its text otherwise add a new cell.
if($("tbody tr").eq(columnIndex).find("td").eq(headerIndex).length){
$("tbody tr").eq(columnIndex).find("td").eq(headerIndex).text("Inserted");
}else{
$("tbody tr").eq(columnIndex).append("<td>Inserted</td>");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
<thead>
<tr>
<th> Date </th>
<th value='2'> Completed </th>
<th value='4'> Cancelled </th>
<th value='5'> Pending </th>
<th value='1'> Arrived </th>
<th value='9'> Waiting </th>
<th value='10'> Cancelled Provider</th>
</tr>
</thead>
<tbody>
<tr>
<td value='2017-20-8'>2017-20-8</td>
</tr>
<tr>
<td value='2017-20-9'>2017-20-9</td>
</tr>
</tbody>
</table>
I've added some comments to explain what the code does.
The basic idea is to determine the header's position (its index) and the column's position.
You can't just add a column to a row at a given horizontal position, you'll have to fill the row with cells up to that position in order to arrange the cell horizontally.
这篇关于jQuery将单元格插入tr值和td值的特定位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
