使用JavaScript/jQuery修改HTML表格指定数值的显示格式

Got it, let's tackle this problem step by step. First, let's formalize the conversion rules we can derive from your examples:

• For values ending with .50: Take the integer part and prefix it with + (e.g., 2.50 → +2, 7.50 → +7)
• For values ending with .75: Add 1 to the integer part and prefix it with - (e.g., 4.75 → -5, 0.75 → -1)
• Integer values remain unchanged (e.g., 1, 4, 3 stay as-is)
• Values inside parentheses follow the same rules (e.g., (6.50) → (+6), (0.75) → (-1))

Vanilla JavaScript Implementation #

This version works without any external libraries, great for lightweight projects:

// Core function to convert a single numeric string
function convertValue(valueStr) {
  const num = parseFloat(valueStr);
  const decimalPart = num - Math.floor(num);
  
  if (decimalPart === 0.5) {
    return `+${Math.floor(num)}`;
  } else if (decimalPart === 0.75) {
    return `-${Math.floor(num) + 1}`;
  }
  
  // Return original string if it's an integer or unrecognized format
  return valueStr;
}

// Function to process all table cells
function processTable() {
  // Target all <td> elements; add a table ID (e.g., #data-table) to narrow scope if needed
  const tableCells = document.querySelectorAll('td');
  
  tableCells.forEach(cell => {
    let cellText = cell.textContent;
    
    // Regex to match both standalone values and values inside parentheses
    cellText = cellText.replace(/(\(([\d.]+)\)|([\d.]+))/g, (match, _, insideParen, outsideParen) => {
      const targetValue = insideParen || outsideParen;
      const converted = convertValue(targetValue);
      
      // Wrap back in parentheses if the original was inside them
      return insideParen ? `(${converted})` : converted;
    });
    
    cell.textContent = cellText;
  });
}

// Run when the page finishes loading
document.addEventListener('DOMContentLoaded', processTable);

jQuery Implementation #

If you're already using jQuery in your project, this concise version fits right in:

// Core conversion function (same logic as vanilla version)
function convertValue(valueStr) {
  const num = parseFloat(valueStr);
  const decimalPart = num - Math.floor(num);
  
  if (decimalPart === 0.5) {
    return `+${Math.floor(num)}`;
  } else if (decimalPart === 0.75) {
    return `-${Math.floor(num) + 1}`;
  }
  
  return valueStr;
}

// Process table on document ready
$(document).ready(function() {
  // Target <td> elements; use a table selector like $('#data-table td') for specific tables
  $('td').each(function() {
    let cellText = $(this).text();
    
    cellText = cellText.replace(/(\(([\d.]+)\)|([\d.]+))/g, (match, _, insideParen, outsideParen) => {
      const targetValue = insideParen || outsideParen;
      const converted = convertValue(targetValue);
      return insideParen ? `(${converted})` : converted;
    });
    
    $(this).text(cellText);
  });
});

Key Notes #

• Scope Control: If you have multiple tables on the page, add an ID to your target table (e.g., <table id="conversion-table">) and update the selector to #conversion-table td to avoid modifying unintended cells.
• Edge Cases: The code ignores values with decimal parts other than .50 or .75 (they stay as-is). If you need to handle other formats, extend the convertValue function with additional conditions.
• Testing: Both implementations will transform your sample table exactly into the expected output you provided.

内容的提问来源于stack exchange，提问作者Kafus