用数字替换带有逗号的表格

时间:2015-11-11 11:04:52

标签: javascript jquery html

我有一个填充了来自AJAX调用的数据的表,所有这些数据(数字和字符串)都像往常一样插入到td和tr标签中。 我需要用逗号替换十进制数字中的所有点,但我不想在每个手动中调用方法“replacewith()”。 我想到了这样的事情:

$( document ).ready() {
   $(#"<tr>").isNumeric().replaceWith('.', ',');
}

这样当页面收费时,jquery会自动检测表格单元格中的数字并用逗号替换它们的数字。

我甚至不知道这个想法是否可行......但是,你有什么建议吗?

2 个答案:

答案 0 :(得分:4)

尝试为您的表提供一个行为类,然后在文档就绪中使用类似的东西:

public class Cloud extends Application {

    private Stage primaryStage;
    private BorderPane rootLayout;

    /**
     * The data as an observable list of Persons.
     */
    private ObservableList<Person> personData = FXCollections.observableArrayList();

    /**
     * Constructor
     */
    public Cloud() {
     }

    /**
     * Returns the data as an observable list of Persons. 
     * @return
     */
    public ObservableList<Person> getPersonData() {
        return personData;
    }

    @Override
    public void start(Stage primaryStage) {
        this.primaryStage = primaryStage;
        this.primaryStage.setTitle("AddressApp");

        // Set the application icon.
        this.primaryStage.getIcons().add(new Image("file:resources/images/address_book_32.png"));



        showPersonOverview();
    }

    /**
     * Initializes the root layout and tries to load the last opened
     * person file.
     */


    /**
     * Shows the person overview inside the root layout.
     */
    public void showPersonOverview() {
        try {
            // Load person overview.
            FXMLLoader loader = new FXMLLoader();
            loader.setLocation(Cloud.class.getResource("root.fxml"));
            AnchorPane personOverview = (AnchorPane) loader.load();
Stage dialogStagee = new Stage();
            dialogStagee.setTitle("Edit Person");
            dialogStagee.initModality(Modality.WINDOW_MODAL);
            dialogStagee.initOwner(primaryStage);
            Scene scene = new Scene(personOverview);
            dialogStagee.setScene(scene);



            // Give the controller access to the main app.
           rootcontroller controller = loader.getController();
            controller.setMainApp(this);
dialogStagee.showAndWait();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    /**
     * Opens a dialog to edit details for the specified person. If the user
     * clicks OK, the changes are saved into the provided person object and true
     * is returned.
     * 
     * @param person the person object to be edited
     * @return true if the user clicked OK, false otherwise.
     */
    public boolean showPersonEditDialog(Person person) {
        try {
            // Load the fxml file and create a new stage for the popup dialog.
            FXMLLoader loader = new FXMLLoader();
            loader.setLocation(Cloud.class.getResource("add.fxml"));
            AnchorPane page = (AnchorPane) loader.load();

            // Create the dialog Stage.
            Stage dialogStage = new Stage();
            dialogStage.setTitle("Edit Person");
            dialogStage.initModality(Modality.WINDOW_MODAL);
            dialogStage.initOwner(primaryStage);
            Scene scene = new Scene(page);
            dialogStage.setScene(scene);

            // Set the person into the controller.
            addcontroller controller = loader.getController();
            controller.setDialogStage(dialogStage);
            controller.setPerson(person);

            // Set the dialog icon.
            dialogStage.getIcons().add(new Image("file:resources/images/edit.png"));

            // Show the dialog and wait until the user closes it
            dialogStage.showAndWait();


        } catch (IOException e) {
            e.printStackTrace();

        }
        return false;
    }


    public Stage getPrimaryStage() {
        return primaryStage;
    }

    public static void main(String[] args) {
        launch(args);
    }
}

这里的jsfiddle: https://jsfiddle.net/wtzkbm7n/

答案 1 :(得分:1)

无法自动检测何时将元素添加到页面中。您可以使用AJAX全局事件来检测何时进行AJAX调用并使用计时器等待结果处理完毕,但这意味着您必须检查页面中每个AJAX调用的所有表格单元格,有一个延迟直到细胞被纠正,它仍然不会涵盖所有情况。

手动调用函数是一项额外的工作,但它是最可靠和最有效的方法。

您可以使用要处理的元素调用该函数。这样您就不必查看整个页面中的所有表格单元格。

查找表格单元格而不是表格行。您应该查看单元格中的节点,而不是仅对其中的任何内容进行替换,否则您可能会破坏实际上不是文本的部分代码。要处理嵌套元素,可以递归地为任何非文本节点的节点调用该函数。

示例:

function fixPeriods(elements) {
  elements.contents().each(function(i, el){
    if (el.nodeType == 3) {
      if ($.isNumeric(el.data)) {
        el.data = el.data.replace(/\./g, ',');
      }
    } else {
      fixPeriods($(el));
    }
  });
}

fixPeriods($('#Bjursta td'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table id="Bjursta">
  <tr><td>3.14</td><td>4.5<b>2.3</b>1.8</td></tr>
  <tr><td>1.337</td><td>Not a number.</td></tr>
  <tr><td>7.65</td><td>127.0.0.1</td></tr>
</table>