在td标记中放置一个0（零）而不是几个0
这是我的HTML，
<table class="table table-striped">
<thead>
<tr>
<th>Sl</th>
<th>Book</th>
<th th:each="inventory: ${inventories}" th:text="${inventory.name}"></th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr th:each="book, bookCount : ${books}">
<td th:text="${bookCount.index}+1"></td>
<td th:text="${book.name}"></td>
<td th:each="inventory, inventoryCount : ${inventories}">
<span th:each="inventoryDetails, inventoryDetailsCount : ${inventoryDetailsList}">
<span th:if="${inventory eq inventoryDetails.inventory}">
<span th:text="${inventoryDetails.book eq book}? ${inventoryDetails.bookQuantity} : 0"></span>
</span>
</span>
</td>
<td th:text="${book.inventoryQuantity}"></td>
</tr>
</tbody>
</table>
这是当前的输出，
案例1：第3册中的第3册
目前显示： 0 0 0
预期： 0
案例2：在0库存中预订0 或在库存0中预订1
目前显示： 0 0 20或0 20 0
预期： 20
您可以在广告资源2
下看到理想的情景您能否建议我解决一下如何使用jquery获得预期的结果？
这是渲染的Html，
<table class="table table-striped">
<thead>
<tr>
<th>Sl</th>
<th>Book</th>
<th>Inventory 0</th>
<th>Inventory 1</th>
<th>Inventory 2</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Book 5</td>
<td>
<span>
<span>
<span>50</span>
</span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
</td>
<td>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
</span>
</td>
<td>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
</td>
<td>0</td>
</tr>
<tr>
<td>2</td>
<td>Book 1</td>
<td>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
<span>
<span>20</span>
</span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
</td>
<td>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
</span>
</td>
<td>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
</td>
<td>20</td>
</tr>
<tr>
<td>3</td>
<td>Book 0</td>
<td>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
<span>
<span>20</span>
</span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
</td>
<td>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
<span>
<span>60</span>
</span>
</span>
<span>
</span>
</td>
<td>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
<span>
<span>40</span>
</span>
</span>
</td>
<td>120</td>
</tr>
<tr>
<td>4</td>
<td>Book 3</td>
<td>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
</td>
<td>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
<span>
<span>10</span>
</span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
</span>
</td>
<td>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
</td>
<td>10</td>
</tr>
</tbody>
</table>
2 个答案:
答案 0 :(得分：1)
嗯，这是一个解决方案。不那么优雅（必须使用少数几个循环），但它正在工作：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
$('.table-striped td').each(function() {
//spantext=$(this).find('span').text().replace(/[^0-9]/g,'');
$(this).find('span').each(function( index ) {
spantext=$(this).text().replace(/[^0-9]/g,'');
if(spantext=='0') {
$(this).remove();
}
});
});
$('.table-striped td').each(function() {
if(!($.trim($(this).text()).length)) {
$(this).html('<span>0</span>')
}
});table,th, td {
border:1px solid black;
border-collapse:collapse;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th>Sl</th>
<th>Book</th>
<th>Inventory 0</th>
<th>Inventory 1</th>
<th>Inventory 2</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Book 5</td>
<td>
<span>
<span>
<span>50</span>
</span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
</td>
<td>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
</span>
</td>
<td>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
</td>
<td>0</td>
</tr>
<tr>
<td>2</td>
<td>Book 1</td>
<td>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
<span>
<span>20</span>
</span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
</td>
<td>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
</span>
</td>
<td>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
</td>
<td>20</td>
</tr>
<tr>
<td>3</td>
<td>Book 0</td>
<td>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
<span>
<span>20</span>
</span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
</td>
<td>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
<span>
<span>60</span>
</span>
</span>
<span>
</span>
</td>
<td>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
<span>
<span>40</span>
</span>
</span>
</td>
<td>120</td>
</tr>
<tr>
<td>4</td>
<td>Book 3</td>
<td>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
</td>
<td>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
<span>
<span>10</span>
</span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
</span>
</td>
<td>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
</td>
<td>10</td>
</tr>
</tbody>
</table>
所以，想法是 - 找到（仅）零的跨度，删除它，重建td的HTML（第二个循环）。如果我找到更优雅的解决方案，我会发布它......
答案 1 :(得分：0)
使用纯JavaScript的一种方法如下：
// a named function, in case you might need to use it
// more than once:
function repeatedToSingle(opts) {
// using 'let' (instead of 'var') to declare variables,
// this requires ES6 (or above) compliant browsers; for
// ES5 or below simply use 'var' instead.
// Here we set the defaults for the function:
// 'character' : String, the character that we wish
// to remove repeated instances of,
// 'ignoreCase': Boolean,
// true: we ignore the case of the
// character, and use a case-insensitive
// search ('P' will match 'p'),
// false: we respect the case of the
// supplied character ('P' will not match 'p'),
// 'table' : the <table> element within which to search,
// 'amendedClassName' : String, the class-name to add to the
// elements that this function changes;
// Boolean false, or an empty String,
// prevents a class-name from being added.
let settings = {
'character': '0',
'ignoreCase': false,
'table': document.querySelector('table'),
'amendedClassName': 'amended'
};
// Here we use Object.keys() to return an Array of the keys for
// the supplied opts Object, if supplied, or an empty Object
// (in order to prevent throwing an error), and iterating
// over that array of keys using Array.prototype.forEach():
Object.keys(opts || {}).forEach(
// using an Arrow function to set the value of the opts key
// as the property-value of the settings key (to allow the
// user to override the default settings):
key => settings[key] = opts[key]
);
// declaring a regular expression, using the new RegExp()
// constructor, in order to allow us to interpolate the
// supplied character with the beginning of string ('^'),
// and the one-or-more ('+') and end-of-string ('$')
// special characters, and setting the case-insensitive flag
// ('i') for the regular expression based on whether the
// settings.ignoreCase property is set to true or false:
let regex = new RegExp('^' + settings.character + '+$', settings.ignoreCase === true ? 'i' : '');
// here we using Element.querySelectorAll() to find those
// <td> elements that are contained within a <tbody> element,
// using Array.from() to convert that NodeList into an Array,
// filtering that Array with Array.prototype.filter(), and its
// Arrow function:
return Array.from(settings.table.querySelectorAll('tbody td')).filter(
// cell is a reference to the current <td> element of the Array
// of Elements over which we're iterating.
// here we're testing that the text-content of the cell, after
// replacing all sequences of one-or-more ('+') white-spaces
// with empty Strings matches the created regular expression;
// RegExp.test() returns a Boolean, true if the supplied String
// matches the test, and false if not; if the result is true
// the element is retained in the Array, otherwise discarded:
cell => regex.test(cell.textContent.trim().replace(/\s+/g, ''))
// Array.prototype.forEach() is used to iterate over the remaining
// <td> elements in the Array, using an Arrow function:
).forEach(cell => {
// if we have a truthy value for settings.amendedClassName
// and we have a length for that value:
if (settings.amendedClassName && settings.amendedClassName.length) {
// we use the Element.classList API to add that class-name to
// the current <td>:
cell.classList.add(settings.amendedClassName);
}
// setting the text-content of the current <td> to the
// supplied character:
cell.textContent = settings.character;
});
// this function also returns the filtered Array, which is the
// Array of modified cells, in the event that the user may
// want to store a reference.
}
repeatedToSingle();
＆＃13;
＆＃13;
＆＃13;
＆＃13;
function repeatedToSingle(opts) {
let settings = {
'character': '0',
'ignoreCase': false,
'table': document.querySelector('table'),
'amendedClassName': 'amended'
};
Object.keys(opts || {}).forEach(
key => settings[key] = opts[key]
);
let regex = new RegExp('^' + settings.character + '+$', settings.ignoreCase === true ? 'i' : '');
return Array.from(settings.table.querySelectorAll('tbody td')).filter(
cell => regex.test(cell.textContent.trim().replace(/\s+/g, ''))
).forEach(cell => {
if (settings.amendedClassName && settings.amendedClassName.length) {
cell.classList.add(settings.amendedClassName);
}
cell.textContent = settings.character;
});
}
repeatedToSingle();td {
border: 1px solid #000;
width: 2em;
height: 2em;
line-height: 2em;
padding: 0;
}
.amended {
color: #f90;
}
.ffs {
text-align: center;
font-weight: bold;
}<table class="table table-striped">
<thead>
<tr>
<th>Sl</th>
<th>Book</th>
<th>Inventory 0</th>
<th>Inventory 1</th>
<th>Inventory 2</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Book 5</td>
<td>
<span>
<span>
<span>50</span>
</span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span></span>
<span></span>
<span></span>
</td>
<td>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
</span>
</td>
<td>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
</td>
<td>0</td>
</tr>
<tr>
<td>2</td>
<td>Book 1</td>
<td>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
<span>
<span>20</span>
</span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
</td>
<td>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
</span>
</td>
<td>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
</td>
<td>20</td>
</tr>
<tr>
<td>3</td>
<td>Book 0</td>
<td>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
<span>
<span>20</span>
</span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
</td>
<td>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
<span>
<span>60</span>
</span>
</span>
<span>
</span>
</td>
<td>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
<span>
<span>40</span>
</span>
</span>
</td>
<td>120</td>
</tr>
<tr>
<td>4</td>
<td>Book 3</td>
<td>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
</td>
<td>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
<span>
<span>10</span>
</span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
<span>
</span>
</td>
<td>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
<span>
<span>
<span>0</span>
</span>
</span>
</td>
<td>10</td>
</tr>
</tbody>
</table>
参考文献：
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？